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

左手的ㄟ右手 2022-04-21 19:02 429阅读 0赞

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