实现jqGrid单元格编辑完后点击提交按钮一次性提交

常见的是jqgrid单元格编辑完后就触发与服务端的交互，我在开发的时候碰到下面的需求（如下图）：

在点击确定按钮前要结束最后一个单元格编辑状态，如上图，否则getRowData方法获取的表格数据包含文本编辑框的html代码,如下图

且必须用saveCell函数结束文本编辑状态，（不能用restoreCell函数，因为此函数只能获取编辑前的数据）写法如下：

$("#businessplanmag_add_list").jqGrid("saveCell",businessplanmag_iRow,businessplanmag_iCol);

businessplanmag_iRow,businessplanmag_iCol分别表示单元格的水平和垂直坐标，这是2个全局变量，在下面赋值

beforeEditCell:function(rowid,cellname,value,iRow,iCol){ businessplanmag_iRow=iRow; businessplanmag_iCol=iCol; },

完整代码如下：

//添加修改_公用 function businessplanmag_table_show(jsondata){ $("#businessplanmag_add_list").jqGrid("GridUnload"); $("#businessplanmag_add_list").jqGrid({ datastr:jsondata, datatype:"jsonstring", width:600, height: "100%", colNames:[ID,省区id,省id,省区,计划成交额,线上成交额,线下成交额], colModel:[ {name:p_id,index:p_id, width:80,key:true,align:center,hidden:true}, {name:areaid,index:areaid, width:50,align:center,hidden:true}, {name:proid,index:proid, width:50,align:center,hidden:true}, {name:area_name,index:area_name, width:150,align:center}, {name:business_volume_plan,index:business_volume_plan, width:150,align:right,editable:true,editrules:{custom:true, custom_func:function(value, colname){ if(rule.price.test(value)){ return [true];}else{ return [false,"请输入数字，可保留2位小数！"]; } }}}, {name:business_volume_online,index:business_volume_online, width:150,align:right,editable:true,editrules:{custom:true, custom_func:function(value, colname){ if(rule.price.test(value)){ return [true];}else{ return [false,"请输入数字，可保留2位小数！"]; } }}}, {name:business_volume_offline,index:business_volume_offline, width:150,align:right} ], jsonReader : { repeatitems: false, id:"p_id", }, cellEdit:true, cellsubmit:"clientArray", beforeEditCell:function(rowid,cellname,value,iRow,iCol){ businessplanmag_iRow=iRow; businessplanmag_iCol=iCol; }, afterSaveCell:function(id,name,val,iRow,iCol){ if(name=="business_volume_plan"){ var business_volume_offline=val-$("#businessplanmag_add_list").jqGrid("getCell",id,"business_volume_online"); }else{ var business_volume_offline=$("#businessplanmag_add_list").jqGrid("getCell",id,"business_volume_plan")-val; } if(business_volume_offline<0){ $("#businessplanmag_add_list").jqGrid("restoreCell",iRow,iCol); $.longhz.alert("计划成交额不能小于线上成交额！"); return; } $("#businessplanmag_add_list").jqGrid("setCell",id,"business_volume_offline",business_volume_offline.toFixed(2)); }, caption:"" }); }

需要注意以下几点：

1、 cellsubmit的值必须是"clientArray"；

2、afterSaveCell函数在单元格编辑完后触发，实现功能如下图

3、此函数只用于呈现表格，表格数据是通过参数jsondata传入，这样做的好处是可动态更改表格的呈现数据。

4、这里用到了jqgrid编辑自带的验证方法

editrules:{custom:true, custom_func:function(value, colname){ if(rule.price.test(value)){ return [true];}else{ return [false,"请输入数字，可保留2位小数！"]; } }}