实现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位小数！"]; }

            }}