自定义jqGrid中的“添加/编辑”对话框

对不起，我无法发布图片，我太新了。

在jqGrid添加/编辑对话框中，我想根据之前做出的选择加载可选项的列表。 在上图中，应根据条件选择中选择的值加载值选择。 我相信要走的路线是在editoptions对象中使用dataurl但我在这方面遇到了问题。 令人不安的第一个问题是基于此处的文档，当标准值的更改允许我更新值列表时，似乎没有可触发的事件。

另外，我对如何从ajax请求返回数据感到困惑。 在文档中它说：

设置editoptions dataUrl参数editoptions dataUrl参数仅对edittype：select元素有效。 dataUrl参数表示应从中获取html select元素的url。 设置此选项后，元素将填充AJAX请求中的值。 数据应该是带有所需选项的有效HTML select元素“

这是否意味着我需要生成html并将其作为响应的一部分返回？ 以前我用json传递了所有数据。

Answer 1

jqGrid在editoptions中没有简单的依赖选择支持。 所以要实现的是必须在主要选择上使用change事件来手动更新第二个（依赖）选择的选项列表。

在演示中，您将了解如何实现相关选择。 我在演示’local’数据类型中使用，因此设置editoptions value属性而不是dataUrl ，但应该做的主模式保持不变。 此外，在演示中，我不仅使用表单编辑，还使用内联编辑。 代码在两种情况下都有效。 由于jqGrid在表单编辑模式下不支持本地编辑，因此表单的提交不起作用。 我可以使用我在这里描述的技巧，但代码会更长，并且将包含许多远离你的主要问题的东西。 所以我决定在提交不起作用的表单中发布代码。

您可以在下面找到演示中的代码：

 var countries = { '1': 'US', '2': 'UK' }, states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' }, statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' }, statesOfUK = { '5': 'London', '6': 'Oxford' }, // the next maps contries by ids to states statesOfCountry = { '1': statesOfUS, '2': statesOfUK }, mydata = [ { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" }, { id: '1', Country: '1', State: '3', Name: "Jim Morrison" }, { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" }, { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" } ], lastSel = -1, grid = $("#list"), resetStatesValues = function () { // set 'value' property of the editoptions to initial state grid.jqGrid('setColProp', 'State', { editoptions: { value: states} }); }; grid.jqGrid({ data: mydata, datatype: 'local', colModel: [ { name: 'Name', width: 200 }, { name: 'Country', width: 100, editable: true, formatter: 'select', edittype: 'select', editoptions: { value: countries, dataInit: function (elem) { var v = $(elem).val(); // to have short list of options which corresponds to the country // from the row we have to change temporary the column property grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} }); }, dataEvents: [ { type: 'change', fn: function (e) { // build 'State' options based on the selected 'Country' value var v = $(e.target).val(), sc = statesOfCountry[v], newOptions = '', stateId, form, row; for (stateId in sc) { if (sc.hasOwnProperty(stateId)) { newOptions += '' + states[stateId] + ''; } } resetStatesValues(); // populate the subset of contries if ($(e.target).is('.FormElement')) { // form editing form = $(e.target).closest('form.FormGrid'); $("select#State.FormElement", form[0]).html(newOptions); } else { // inline editing row = $(e.target).closest('tr.jqgrow'); $("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions); } } } ] } }, { name: 'State', width: 100, editable: true, formatter: 'select', edittype: 'select', editoptions: { value: states } } ], onSelectRow: function (id) { if (id && id !== lastSel) { if (lastSel !== -1) { resetStatesValues(); grid.jqGrid('restoreRow', lastSel); } lastSel = id; } }, ondblClickRow: function (id) { if (id && id !== lastSel) { grid.jqGrid('restoreRow', lastSel); lastSel = id; } resetStatesValues(); grid.jqGrid('editRow', id, true, null, null, 'clientArray', null, function () { // aftersavefunc resetStatesValues(); }); return; }, editurl: 'clientArray', sortname: 'Name', ignoreCase: true, height: '100%', viewrecords: true, rownumbers: true, sortorder: "desc", pager: '#pager', caption: "Demonstrate dependend select/dropdown lists (edit on double-click)" }).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true }, { // edit options recreateForm: true, viewPagerButtons: false, onClose: function () { resetStatesValues(); } }, { // add options recreateForm: true, viewPagerButtons: false, onClose: function () { resetStatesValues(); } }); 

更新 ：请参阅演示中最新版本的答案的 “更新2”部分。