jqGrid单元格编辑动态设置editoptions dataUrl实现select联动示例

　　之前有写过一篇jqGrid单元格编辑select联动示例的文章，通过使用自定义编辑类型来实现依据某字段值加载select选项，此文将通过setColProp方法来动态修改colModel配置中的editoptions，dataUrl来实现select数据加载，相关文件去jqGrid单元格编辑select联动示例文中查看详细，本文就补贴出重复内容，只贴出js实现逻辑。

 

　　不过jqGrid单元格编辑使用select视乎存在一个bug，就是编辑完毕切换为文本模式时，显示的为option的text属性，对应列存储的值也为text，但是一般我们需要显示的text，但是列存储的值为value属性，而不是text。具体如何实现edittype为select时，如何实现value和text的转换，可以参考这篇文章：jqGrid单元格编辑为select取值和显示示例，此文就不详细解说了。（本示例使用了2个字段，一个存储value，一个存储text，所以简单一些，只需要更新对应列的value，text由jqGrid更新。）



　　主要JS代码如下，其他文件和html代码都没变

    $(function () {
         jQuery("#grid").jqGrid({
             url: 'data.txt',
             cellEdit: true,
             cellsubmit: 'clientArray',
             datatype: "json",
             jsonReader: {
                 repeatitems: false,
                 root: "list"
             },
             height: 150,
             caption: 'jqGrid单元格编辑动态设置editoptions dataUrl实现select联动示例',
             colNames: ['ID', '省', '市', 'provid', 'cityid'],
             formatCell: function (rowid, cellname, value, iRow, iCol) {
                 var rec = $('#grid').jqGrid('getRowData', rowid);
                 $('#grid').jqGrid('setColProp', 'cityname', { editoptions: { dataUrl: 'city.asp?provid=' + rec.provid} });
             },
             afterSaveCell: function (rowid, cellname, value, iRow, iCol) {
                 if (cellname == 'cityname') { //为联动的select列编辑，更新cityid，传入的value桉树为option的value，不是text
                    $('#grid').jqGrid('setRowData', rowid, {cityid:value}) ;
                 }
             },
             colModel: [
                   { name: 'id' },
                   { name: 'provname', editable: true, edittype: 'select', editoptions: { dataUrl: 'prov.txt'} },
                   { name: 'cityname', editable: true, edittype: 'select', editoptions: { dataUrl: 'city.asp'} },
             //需要添加这2个隐藏列，要不getRowData获取不到附加的行数据，只能获取到colModel中配置的
                   {name: 'provid', hidden: true },
                   { name: 'cityid', hidden: true }
               ]
         });
     });

 

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


原创文章，转载请注明出处：jqGrid单元格编辑动态设置editoptions dataUrl实现select联动示例

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