ExtJs表格控件（三）----单元格编辑与提交修改

ExtJs表格控件（三）----单元格编辑与提交修改

2015-02-14       0  个评论    来源：翻滚吧小牛  

收藏     我要投稿

ExtJs的EditorGrid控件提供了动态修改某个单元格的方法，首先如果要使用编辑插件，首先必须要在需要的列上添加editor属性，只有添加了editor属性的列才可以被编辑，否则无法编辑。同时我们可以在editor中添加一些限制或者约束条件，例如禁止编辑的单元格为空，首先在定义列的时候使用如下方法定义：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

var columns = [{      header : '第一列' ,      dataIndex : 'first' ,      renderer:datarender,      editor:{          allowBlank: false      } }, {      header : '第二列' ,      dataIndex : 'second' ,      editor:{          allowBlank: false      } }, {      header : '第三列' ,      dataIndex : 'third' ,      editor:{          allowBlank: false      } }, {      header : '第四列' ,      dataIndex : 'four' ,      format: 'Y-m-d H:i:s' ,      width: 120 ,      editor:{          allowBlank: false      } } ];

然后在在GraidPanel中启用CellEditing插件即可。

?

1 2 3

plugins:[Ext.create( 'Ext.grid.plugin.CellEditing' ,{          clicksToEdit: 2 //设置点击几次触发编辑插件，默认次数为2      })],

这样就可以实现双击对应的单元格后实现单元格编辑，当修改完单元格后需要将修改的内容传输到后台进行处理，这里我们为GridPanel中添加一个顶部工具栏，然后有个保存按钮，点击保存按钮将修改数据进行传输。

下面看具体示例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

tbar:[{          text: '保存' ,          handler:function(){              var m = store.getModifiedRecords().slice( 0 );              var jsonArray = [];              Ext.each(m,function(item){                  jsonArray.push(item.data);              });                            Ext.Ajax.request({                  method: 'POST' ,                  url: "grid_StoreMsg" ,                  success:function(response){                      Ext.Msg.alert( '提示' , '成功' );                  },                  failure:function(){                      Ext.Msg.alert( '提示' , '失败' );                  },                  params: 'jsonArray=' +encodeURIComponent(Ext.encode(jsonArray))              });          }      }]

在这里我们先使用store.getModifiedRecords()。获取store中修改过的数据，然后Slice(start,[end])函数的作用是返回一个新的数组，包含原数组从start到end所指定的元素，但不包含end元素，例如有个长度为5的数组a，a.slice(1,4)就是返回数组中的第2、3、4个元素组成的新数组（注意下表从0开始），如果start或者end为负数都给这个负数加上原数组的长度进行计算，例如：a.slice(-2,4)可以当作a.slice(3,4)。上述代码中slice(0)的作用是复制store.getModifiedRecords()中的数据，从而保证原数据不受影响。

Ext.each(array,function)的作用是遍历array数组，并对数组中的每一项调用function函数，如果array不是一个数组，那么就会执行一次。如果数组中某一项调用函数后返回结果是false那么遍历将结束并且退出。