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