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