JqGrid之单元格编辑后保存-yellowcong

在JqGrid中，提供了关于单元格编辑的函数，但是有些官网是没有讲到的，这里总结一下
1、afterSaveCell:function(rowid,name,val,iRow,iCol)，
2、beforeEditCell:function(rowid,cellname,value,iRow,iCol)
beforeSaveCell:function(rowid,cellname,value,iRow,iCol)
3、$("#grid").jqGrid("saveCell",iRow,iCol);
4、$("#grid").jqGrid("restoreCell",rowid,iCol);
5、$("#grid").jqGrid('setCell', rowid, iCol, '', 'not-editable-cell');

需要注意一点，rowid是字符串，不是int类型数据，这个坑，本宝宝表示以踩

但是在API中，并没有详细的说明，这写函数在Grid的单元格编辑中，是比较的重要的，可以控制输入的数据类容和格式

beforeEditCell事件

在编辑前做处理

beforeEditCell:function(rowid, //行id            cellname, //单元格名称            value,//单元格值 ，在编辑前的默认值            iRow, //行的index            iCol)//列的index

beforeSaveCell 事件

在保存之前处理，用来判断逻辑，做对话框等操作

beforeSaveCell :function(rowid, //行id            cellname, //单元格名称            value,//单元格值 ，在编辑前的默认值            iRow, //行的index            iCol)//列的index

afterSaveCell事件

我们可以在afterSaveCell事件中，做判断，处理需要处理和操作的数据，比如判断数据的格式，长度等问题
格式化数据

afterSaveCell:function(rowid,//行id            name,//单元格名称            val,//单元格值 ，编辑后的值            iRow,//行的index            iCol)//列的index

saveCell 函数

当我们的数据更改后，在grid的元数据还是没有变更的，需要通过这个方法，来修改元数据，这样可以通过getRowData和getLocalRow两个方法获取到数据了

//用于保存我们编辑后的单元格的数据$("#grid").jqGrid("saveCell",                        iRow, //行                        iCol);//列

restoreCell函数

恢复Cell,当更改的数据不是自己想要的，就需要将数据做回滚操作

//恢复cell$("#grid").jqGrid("restoreCell",            rowid,//行index            iCol)//列index

setCell函数

在需求中，我们也可以自己设定单元格里面的数据，这样就不需要恢复数据了

#设定单元格数据$("#gridRakuData").jqGrid('setCell',              rowid,//行             iCol,//列index              'test'); //设定的值//设定表格可编辑的状态 1、删除not-editable-cell 样式，2、设定edit-cell 样式$('#gridRakuData #'+rowid+' td[aria-describedby="gridRakuData_kngaku'+strBiddingNo+'"]').removeClass('not-editable-cell');$("#gridRakuData").jqGrid('setCell', rowid, iCol, '', 'edit-cell');//设定表格不可以编辑$("#gridRakuData").jqGrid('setCell', rowid, iCol, '', 'not-editable-cell');

例子

这个例子中，控制的是单元格可编辑，不能入力小数，入力了提示对话框的操作

$("#gbox_gridRakuData").remove();    $("#wfgm1070RakuData").append("<table id='gridRakuData'></table>");    $('#gridRakuData').jqGrid({        formatter : {             integer : {thousandsSeparator: ",", defaultValue: ""},        },        data: dataList,        datatype:"local",        multiboxonly:true,        cellEdit:girdEditDistable, //CELL EDIT ABLE        cellsubmit:'clientArray',        colNames:colNames,        colModel:colModel,        width:gridWidth,        height:gridHeight,        scrollOffset:0,        rowNum:dataList.length,        regional:'ja',        beforeSelectRow: function(rowid, event){        },        onSelectRow: function(id) {        },        onCellSelect:function(rowid,iCol,cellcontent,event){            //札回数            var strBiddingNo = $("#kaisu").val().substring($("#kaisu").val().length-1) ;            if(strBiddingNo != undefined){                if((iCol-2) == strBiddingNo ||iCol == 14 ){                    $('#gridRakuData #'+rowid+' td[aria-describedby="gridRakuData_kngaku'+strBiddingNo+'"]').removeClass('not-editable-cell');                    $("#gridRakuData").jqGrid('setCell', rowid, iCol, '', 'edit-cell');                }else{                    $("#gridRakuData").jqGrid('setCell', rowid, iCol, '', 'not-editable-cell');                }            }            //CLEAR STYLE            var rowIds = $("#gridRakuData").jqGrid('getDataIDs');            for(var row =0;row<rowIds.length;row++){                var rowId = rowIds[row];                for(var col=C_MIN_BIDDING;col<=C_MAX_BIDDING;col++){                    $('#gridRakuData #'+rowId+' td[aria-describedby="gridRakuData_kngaku'+col+'"]').removeClass("ui-state-highlight");                }            }        },beforeEditCell:function(rowid,cellname,value,iRow,iCol){            var kinGakuIndex = iCol-2;        },afterSaveCell:function(rowid,name,val,iRow,iCol){            var kinGakuIndex = iCol-2;            var numberRegx = /^[0-9]+$/;            if (numberRegx.test(val)) {                if(kinGakuIndex>=C_MIN_BIDDING && kinGakuIndex<=C_MAX_BIDDING){                    if(val.length >12){                        sofia.ui.showDialogJsMsg("E", "文字数を超過しています。");                        $("#gridRakuData").jqGrid("restoreCell",rowid,iCol);                        return false;                    }                }            }            if(name == "kiji" && val.length >100){                sofia.ui.showDialogJsMsg("E", "文字数を超過しています。");                $("#gridRakuData").jqGrid("restoreCell",rowid,iCol);                return false;            }            //12.22            var numberSamllRegx = /^[0-9]+\.[0-9]*$/;            if(numberSamllRegx.test(val)){                $("#gridRakuData").jqGrid("restoreCell",rowid,iCol);                return false;            }        },loadComplete(xhr){            //GRID のcheckbox設定            initGridCheckBox();        }    });//设定checkbox只可以点击一个，grid的checkbox像radio使用function initGridCheckBox(){    $("#gridRakuData input[type='checkbox']").click(function(e){        var $obj =$(this);        if($obj.is(':checked')){            $("#gridRakuData input[type='checkbox']").each(function(){                $(this).attr("checked",false);            });            $obj.prop("checked","checked");        }    });}