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开发网
阅读(3630)喜欢(0)不喜欢(0)jqGrid中文API