当前位置: 首页 > 工具软件 > CellEdit > 使用案例 >

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(";"); 





 

      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编辑后,从后台取回数据并处理单元格值的过程,在实际情况下根据需要添加不同事件即可。
 类似资料: