码迷,mamicode.com
首页 > 其他好文 > 详细

编辑 Ext 表格(一)——— 动态添加删除行列

时间:2016-07-25 13:00:31      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

一、动态增删行
在 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 代码:
  1 <!-- 数据定义 -->
  2 <script type="text/javascript">
  3     var data;  // 表格数据
  4     var cols;   // 表格列
  5 
  6     var gridStore = Ext.create(Ext.data.Store, {
  7         fields: [Name]
  8     });
  9 
 10 </script>
 11 
 12 <!-- 事件定义 -->
 13 <script type="text/javascript">
 14     // 初始化整个页面
 15     function onInit() {
 16         onLoadData();
 17 
 18         onInitVar();
 19         onInitColumn();
 20     };
 21     // 请求加载表格数据
 22     function onLoadData() {
 23         data = [{ Name: 老狼 }, { Name: 小羊 }];
 24         gridStore.loadData(data);
 25     };
 26 
 27     // 初始化页面的变量参数
 28     function onInitVar() {
 29         cols = [
 30             {
 31                 xtype: rownumberer,
 32                 text: 序号,
 33                 align: center,
 34                 minWidth: 50,
 35                 maxWidth: 50,
 36             },
 37             {
 38                 text: 姓名,
 39                 dataIndex: Name,
 40                 minWidth: 85,
 41                 maxWidth: 85,
 42                 sortable: false,
 43                 menuDisabled: true,
 44             }
 45         ];
 46     };
 47     // 初始化列
 48     function onInitColumn() {
 49         gridTable.reconfigure(gridStore, cols);
 50     };
 51 
 52     // 添加行
 53     function onAddRow() {
 54         gridStore.add({});
 55     };
 56 
 57     // 删除行
 58     function onDelRow() {
 59         gridStore.removeAt(gridStore.count() - 1);
 60     };
 61 
 62     // 添加列
 63     function onAddColumn() {
 64         cols.push({
 65             text: ,
 66             dataIndex: col,
 67             width: 120,
 68             sortable: false,
 69             menuDisabled: true,
 70         });
 71 
 72         gridTable.reconfigure(gridStore, cols);
 73     };
 74 
 75     // 删除列
 76     function onDelColumn() {
 77         cols.pop()
 78         gridTable.reconfigure(gridStore, cols);
 79     };
 80 
 81 </script>
 82 
 83 <!-- 面板定义 -->
 84 <script type="text/javascript">
 85     var toolbar = Ext.create(Ext.form.Panel, {
 86         id: tool-bar,
 87         region: north,
 88         bbar: [
 89             {
 90                 xtype: button,
 91                 text: 添加行,
 92                 handler: onAddRow
 93             },
 94             {
 95                 xtype: button,
 96                 text: 删除行,
 97                 handler: onDelRow
 98             },
 99             {
100                 xtype: button,
101                 text: 添加列,
102                 handler: onAddColumn
103             },
104             {
105                 xtype: button,
106                 text: 删除列,
107                 handler: onDelColumn
108             }
109         ]
110     });
111 
112     var gridTable = Ext.create(Ext.grid.Panel, {
113         id: gridTable,
114         region: center,
115         layout: fit,
116         columns: cols,
117         store: gridStore,
118         autoScroll: true,
119 
120     });
121 </script>
122 
123 <!-- 脚本入口 -->
124 <script type="text/javascript">
125     Ext.onReady(function () {
126         Ext.create(Ext.Viewport, {
127             id: iframe,
128             layout: border,
129             items: [
130                 toolbar,
131                 gridTable,
132             ]
133         });
134 
135         onInit();
136     });
137 </script>

 

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

编辑 Ext 表格(一)——— 动态添加删除行列

标签:

原文地址:http://www.cnblogs.com/zhengjiafa/p/5702993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!