jqGrid单元格编辑select联动示例

  2013-09-18更新:更正colModel不可动态修改,colModel配置可以动态的通过setColProp方法进行修改,包括editoptions配置。具体示例查看这篇文章:jqGrid单元格编辑动态设置editoptions dataUrl实现select联动示例

 

  jqGrid启用单元格编辑,当设置编辑元素为select,如何依据另外一列的值来动态加载select的option。如省市联动,修改市的内容,依据省加载市的内容。由于jqGrid没有提供动态修改colModel->editoptions配置中的的dataUrl的方法,所以需要自己编写自定义类型,通过获取省id,然后通过ajax发送省id动态加载远程数据生成select。

 

jqGrid单元格编辑select联动示例源代码如下,jqGrid版本3.8

jqGrid单元格编辑select联动示例

<html>    
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jqGrid单元格编辑select联动示例</title>
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"> </script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"> </script>
</head>    
<body>
<table id="grid"></table>
 <script type="text/javascript">
     $(function () {
         function myelem(value, options) {//生成2级联动的select对象方法
             //options对象为colModel配置中的editoptinos对象,并且增加了id和name2个选项,id格式为此数据行id_“name配置的值”,具体看最后的图片
             var rowid = options.id.split('_')[0]; //获取此行数据id,以便调用getRowData方法获取数据行
             var rec = $('#grid').jqGrid('getRowData', rowid); //获取此行对应的数据
             var url = options.url + '?provid=' + rec.provid; //获取加载select的url配置,并且加上记录中的省id
             //获取联动select数据的ajax需要设置为同步,异步要处理的步骤比较多,如ajax未加载完又点击了其他单元格之类的,要还原之前的编辑状态
             var s = '<select><option value="">NaN</option></select>';
             $.ajax({
                 async: false,
                 url: url,
                 dataType: 'html',
                 success: function (data) {
                     s = data;
                 },
                 error: function (xhr) { alert('加载市数据出错!'); }
             });
             //需要手动设置option的选中状态
             s = $(s);
             s.find('option[value=' + rec.cityid + ']').attr('selected', true);
             return s;
         }
         function myvalue(elem, operation, value) {
             if (operation === 'get') {
                 var rowid = elem.attr('id').split('_')[0]; //获取此行数据id,以便调用getRowData方法获取数据行
                 $('#grid').jqGrid('setRowData', rowid, { cityid: elem.val() }); //需要同时更新此数据行中的cityid
                 return elem.find('option:selected').text(); //返回选中的option的text,而不是value
             } else if (operation === 'set') {
                 $('input', elem).val(value);
             }
         }
         jQuery("#grid").jqGrid({
             url: 'data.txt',
             cellEdit: true,
             cellsubmit: 'clientArray',
             datatype: "json",
             jsonReader: {
                 repeatitems: false,
                 root: "list"
             },
             height: 150,
             caption: 'jqGrid单元格编辑select联动示例',
             colNames: ['ID', '省', '市', 'provid', 'cityid'],
             colModel: [
                   { name: 'id' },
                   { name: 'provname', editable: true, edittype: 'select', editoptions: { dataUrl: 'prov.txt'} },
                   { name: 'cityname', editable: true, edittype: 'custom', editoptions: { custom_element: myelem, custom_value: myvalue, url: 'city.asp'} },
             //需要添加这2个隐藏列,要不getRowData获取不到附加的行数据,只能获取到colModel中配置的
                   {name: 'provid', hidden: true },
                   { name: 'cityid', hidden: true }
               ]
         });
     });
     
 </script>    
</body>    
</html>

data.txt

{"list":[{"id":1,"provid":"1","provname":"广西","cityid":"1","cityname":"桂林"},{"id":2,"provid":"2","provname":"北京","cityid":"1","cityname":"北京"},{"id":3,"provid":"1","provname":"广西","cityid":"3","cityname":"柳州"}]}

prov.txt

<select><option value="1">广西</option><option value="2">北京</option></select>

city.asp

<%@ language="vbscript" codepage="65001"%>
<%
response.charset="utf-8"
session.codepage=65001
if request.QueryString("provid")="1" then%>
<select><option value="1">桂林</option><option value="2">南宁</option><option value="3">柳州</option></select>
<%
elseif request.QueryString("provid")="2" then%>
<select><option value="1">北京</option></select><%
else%><select><option value="">NaN</option></select><%
end if
%>

jqGrid单元格编辑select联动示例

 


原创文章,转载请注明出处:jqGrid单元格编辑select联动示例

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