jqGrid限制某些列只有在特定条件下才能编辑

jqGrid编辑某行数据时，如何限制某些列的数据只有满足一些特定的条件下时才允许编辑，下面为示例，单元格编辑，行编辑和表单编辑。
jqGrid单元格编辑示例

　　配置beforeEditCell，判断这个单元格是否为要限制的编辑的列，是的话不满足条件则setTimeout restoreCell还原为未编辑状态（会有闪动，因为要转为input后再还原为文本显示）或者设置输入控件为readonly，至于为什么setTimeout延时还原单元格或者设置输入控件为readonly，是因为输入元素还没有生成，此时调用restore无效或者获取不到输入控件，需要延时执行等待输入控件生成，设置输入控件为readonly需要知道输入控件生成的规则（输入控件id规则参考这里：jqGrid单元格编辑配置，事件及方法）。

　　至于为什么不使用afterEditCell事件，因为getRowData要获取到原始的数据行数据，不能再编辑模式下，要不获取的是html代码，此时就需要直接操作DOM对象获取value，比较麻烦，具体参考：jqGrid单元格/行编辑模式下getRowData如何获取数据行

示例如下，amount字段只有小于100才允许编辑:
var mydata = [{ id: "22", name: "test", note: "note2", amount: 200, tax: "10.00", total: "210.00" }
, { id: "2", name: "test2", note: "note2", amount: 300, tax: "20.00", total: "320.00" }
, { id: "4", name: "test2", note: "note2", amount: 60, tax: "20.00", total: "320.00" }
, { id: "5", name: "test2", note: "note", amount: 90, tax: "20.00", total: "320.00" }
];
jQuery("#list4").jqGrid({
cellEdit: true,
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
var rec = jQuery("#list4").jqGrid('getRowData', rowid);
if (cellname == 'amount' && parseInt(rec[cellname], 10) >= 100) {
setTimeout(function () {
jQuery("#list4").jqGrid('restoreCell', iRow, iCol);
//===>或者设置为只读
//$('#' + rowid + '_amount').attr('readonly', true);
}, 1);
}
},
datatype: "local", shrinkToFit: false,
colNames: ['Inv No', '客户', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 90, sorttype: "int" },
{ name: 'name', index: 'name', width: 100, editable: true },
{ name: 'amount', index: 'amount', width: 80, align: "right", editable: true },
{ name: 'tax', index: 'tax', width: 80, align: "right", editable: true },
{ name: 'total', index: 'total', width: 80, align: "right" },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
multiselect: true,
width: 500,
caption: "jqGrid单元格编辑模式下限制某些列只有在特定条件下才能编辑",
data: mydata
});

jqGrid行编辑示例


　　对于行编辑模式，设置不满足编辑条件的列输入控件为readonly比较好操作，要还原单元格由于行编辑模式下没有提供行号和列号，要自己获取行号和列号要处理的比较多，所以选择简单的方式。（输入控件id规则参考这里：jqGrid行编辑配置）

　　示例如下，amount字段只有小于100才允许编辑:
var mydata = [{ id: "22", Date: "2007-10-01", name: "test", note: "note2", amount: 200, tax: "10.00", total: "210.00" }
, { id: "2", Date: "2007-10-02", name: "test2", note: "note2", amount: 300, tax: "20.00", total: "320.00" }
, { id: "4", Date: "2007-10-02", name: "test2", note: "note2", amount: 60, tax: "20.00", total: "320.00" }
, { id: "5", Date: "2007-10-02", name: "test2", note: "note", amount: 90, tax: "20.00", total: "320.00" }
];
jQuery("#list4").jqGrid({
onSelectRow: function (rowid, status, e) {
var rec = $('#list4').jqGrid('getRowData', rowid);
$('#list4').jqGrid('editRow', rowid, true, function (rowid) {
if (parseInt(rec.amount, 10) >= 100) $('#' + rowid + '_amount').attr('readonly', true);
});
},
datatype: "local", shrinkToFit: false,
colNames: ['Inv No', 'Date', '客户', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 90, sorttype: "int" },
{ name: 'Date', index: 'invdate', width: 110, jsonmap: "invdate" },
{ name: 'name', index: 'name', width: 100, editable: true },
{ name: 'amount', index: 'amount', width: 80, align: "right", editable: true },
{ name: 'tax', index: 'tax', width: 80, align: "right", editable: true },
{ name: 'total', index: 'total', width: 80, align: "right" },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
multiselect: true,
width: 500,
caption: "jqGrid行编辑模式下限制某些列只有在特定条件下才能编辑",
data: mydata
});


jqGrid表单编辑示例

　　大致一样，需要注意表单编辑模式下输入控件的id规则和单元格/行编辑模式不一样，少了“id_”

　　示例如下，amount字段只有小于100才允许编辑:
var mydata = [{ id: "22", Date: "2007-10-01", name: "test", note: "note2", amount: 200, tax: "10.00", total: "210.00" }
, { id: "2", Date: "2007-10-02", name: "test2", note: "note2", amount: 300, tax: "20.00", total: "320.00" }
, { id: "4", Date: "2007-10-02", name: "test2", note: "note2", amount: 60, tax: "20.00", total: "320.00" }
, { id: "5", Date: "2007-10-02", name: "test2", note: "note", amount: 90, tax: "20.00", total: "320.00" }
];
jQuery("#list4").jqGrid({
onSelectRow: function (rowid, status, e) {
var rec = $('#list4').jqGrid('getRowData', rowid);
$('#list4').jqGrid('editGridRow', rowid, { afterShowForm: function (oForm) {
if (parseInt(rec.amount, 10) >= 100) $('#amount').attr('readonly', true);
}
});
},
datatype: "local", shrinkToFit: false,
colNames: ['Inv No', 'Date', '客户', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 90, sorttype: "int" },
{ name: 'Date', index: 'invdate', width: 110, jsonmap: "invdate" },
{ name: 'name', index: 'name', width: 100, editable: true },
{ name: 'amount', index: 'amount', width: 80, align: "right", editable: true },
{ name: 'tax', index: 'tax', width: 80, align: "right", editable: true },
{ name: 'total', index: 'total', width: 80, align: "right" },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
multiselect: true,
width: 500,
caption: "jqGrid限制某些列只有在特定条件下才能编辑",
data: mydata
});