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
<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联动示例