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