jgrid cellEdit 单元格编辑模式
空正豪
2023-12-01
cellEdit:
单元格编辑支持键盘操作,当选中某一单元格时,可以按上下、左右来切换选中
如果单元格可编辑,当我们按下Enter键或鼠标点击其他键时cell编辑后将被保存,除非我们按下Esc键
当cell被编辑过后,cell编程’dirty’数据,这时候在左上角会显示出一个红色标记
当我们点击可编辑的cell时,我们可以直接进入编辑状态 properties:
1、有三个属性来设置cellEdit:
cellEdit:当为true时,cell才可编辑,此时Multiselect(设置选择多行)则不可用,onSelectRow函数不可用
cellsubmit:定义cell容器在那里被保存,’remote’或’clientArray’。如果是’remote’则数据会立刻通过cellUrl用Ajax方式传递到后台去处理,传递格式为:{id:rowed,mycell:cellvalue}
cellurl: 设置cell编辑的url
注意:在collmodel里对列属性进行定义的editrules{}里,所有的设置对cellEdit、inline、rowEdit均适用。 2、cellEdit编辑的几种事件
afterEditCell(rowed,cellname,value,iRow,iCol) afterSaveCell(rowed,cellname,value,iRow,iCol)
afterSubmitCell(serverresponse,rowed,cellname,value,iRow,iCol) beforeEidtCell(rowed,cellname,value,iRow,iCol) beforeSaveCell(rowed,cellname,value,iRow,iCol) beforeSubmitCell(rowed,cellname,value,iRow,iCol) errorCell(serverresponse,statur)
onSelectCell(rowed,celname,value,iRow,iCol)
这些事件在实际应用中拿出部分进行组合应用即可,其中onSelectCell只能应用于不可编辑的单元格 3、举例说明
cellurl: pathname+'/xmlSaleTableEdit?openagent&oper=edit', //定义编辑cellEdit rul和editUrl不同,需要单独设置
cellEdit: true, //cell编辑时,此属性必须为true
afterEditCell: function(rowid,cellname,value,iRow,iCol){
var zk= jQuery("#list").getCell(rowid,"N_JinEr");//获取某一单元格的值 jQuery("#list").setCell(rowid,"N_JinEr",9000,{color:'red','text-align':'center'});
},
afterSubmitCell:function(serverrepsponse,rowid,cellname,value,iRow,iCol){ var text=serverrepsponse.responseText; var arr = text.split(";");
6
if(arr[0].indexOf("true")!=-1){
var num = parseFloat(arr[1]);
jQuery("#list").setCell(rowid,"N_JinEr",num ,{color:'red','text-align':'center'});
} },
以上代码展示了cellEdit设置需要的代码。cellEdit功能的实现只需要设置cellEdit为true,并设置cellurl在后台写处理数据的程序即可。而要满足功能上的需要,还需要添加afterEditCell等事件。
afterSubmitCell:提交完成后事件,serverrepsponse从后台返回数据,rowid选中行id, cellname 单元格name属性在colModel里设置,value cell的值,iRow index of the row,iCol the index of the column
jQuery("#list").setCell(rowid,"N_JinEr",num ,{color:'red','text-align':'center'}//设行id为rowid,列名为’N_JinEr’的单元格值为num,样式设置为{color:'red','text-align':'center'}。
afterSubmitCell处理了cellEdit编辑后,从后台取回数据并处理单元格值的过程,在实际情况下根据需要添加不同事件即可。