编辑 Ext 表格（一）——— 动态添加删除行列

来源：互联网发布：java嵌入式web服务器编辑：程序博客网时间：2024/06/03 01:53

一、动态增删行
在 ext 表格中，动态添加行主要和表格绑定的 store 有关，
通过对 store 数据集进行添加或删除，就能实现表格行的动态添加删除。

（1）动态添加表格的行
gridStore.add({});

（2）动态删除表格的行
gridStore.removeAt(gridStore.count() - 1);

二、动态增删列
在 ext 表格中，动态添加列主要通过修改表格绑定的 column 元素，
通过对 column 元素集进行添加或删除，然后重新渲染表格，就能实现表格行的动态添加删除。
（1）动态添加表格的列
定义表格：
var gridTable = Ext.create('Ext.grid.Panel', {
id: 'gridTable',
region: 'center',
layout: 'fit',
columns: cols,
store: gridStore,
autoScroll: true,
});

添加列：
cols.push({
text: '列',
dataIndex: 'col',
width: 120,
sortable: false,
menuDisabled: true,
});
gridTable.reconfigure(gridStore, cols); // 调用该方法重新配置的时候，会重新载入 store

（2）动态删除表格的列
cols.pop();
gridTable.reconfigure(gridStore, cols);

下面附上完整的 js 代码：

<!-- 数据定义 --><script type="text/javascript">    var data;  // 表格数据    var cols;   // 表格列    var gridStore = Ext.create('Ext.data.Store', {        fields: ['Name']    });</script><!-- 事件定义 --><script type="text/javascript">    // 初始化整个页面    function onInit() {        onLoadData();        onInitVar();        onInitColumn();    };    // 请求加载表格数据    function onLoadData() {        data = [{ 'Name': '老狼' }, { 'Name': '小羊' }];        gridStore.loadData(data);    };    // 初始化页面的变量参数    function onInitVar() {        cols = [            {                xtype: 'rownumberer',                text: '序号',                align: 'center',                minWidth: 50,                maxWidth: 50,            },            {                text: '姓名',                dataIndex: 'Name',                minWidth: 85,                maxWidth: 85,                sortable: false,                menuDisabled: true,            }        ];    };    // 初始化列    function onInitColumn() {        gridTable.reconfigure(gridStore, cols);    };    // 添加行    function onAddRow() {        gridStore.add({});    };    // 删除行    function onDelRow() {        gridStore.removeAt(gridStore.count() - 1);    };    // 添加列    function onAddColumn() {        cols.push({            text: '列',            dataIndex: 'col',            width: 120,            sortable: false,            menuDisabled: true,        });        gridTable.reconfigure(gridStore, cols);    };    // 删除列    function onDelColumn() {        cols.pop()        gridTable.reconfigure(gridStore, cols);    };</script><!-- 面板定义 --><script type="text/javascript">    var toolbar = Ext.create('Ext.form.Panel', {        id: 'tool-bar',        region: 'north',        bbar: [            {                xtype: 'button',                text: '添加行',                handler: onAddRow            },            {                xtype: 'button',                text: '删除行',                handler: onDelRow            },            {                xtype: 'button',                text: '添加列',                handler: onAddColumn            },            {                xtype: 'button',                text: '删除列',                handler: onDelColumn            }        ]    });    var gridTable = Ext.create('Ext.grid.Panel', {        id: 'gridTable',        region: 'center',        layout: 'fit',        columns: cols,        store: gridStore,        autoScroll: true,    });</script><!-- 脚本入口 --><script type="text/javascript">    Ext.onReady(function () {        Ext.create('Ext.Viewport', {            id: 'iframe',            layout: 'border',            items: [                toolbar,                gridTable,            ]        });        onInit();    });</script>

下一篇将介绍如何编辑Ext表格

0 0