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限制某些列只有在特定条件下才能编辑

评论(0)Web开发网
阅读(4300)喜欢(0)不喜欢(0)jqGrid中文API