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

加支付宝好友偷能量挖...

原创文章，转载请注明出处：jqGrid限制某些列只有在特定条件下才能编辑

2013-9-5评论(0)Web开发网

阅读(4532)喜欢(0)分类：jqGrid中文API