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

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

    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插件即可。

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

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

下面看具体示例:

    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那么遍历将结束并且退出。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。