JQGrid:编辑后如何刷新下拉列表? [英] JQGrid: How can I refresh a dropdown after edit?
问题描述
在我的应用程序中，我使用 JQGrid 加载一些联系人数据，当我编辑/添加条目时，我从数据库中选择联系人的姓名，然后更新/添加联系人.
In my application, I use JQGrid for loading some contacts data, and when I edit/add an entry I select the contact's name from database and then update/add contact.
我的问题是，当我点击提交按钮时，我想刷新下拉列表，并且已经输入的数据从下拉列表中消失.
My problem is that, when I click the submit button I want to refresh the dropdown and the data that has been already entered to dispaear from dropdown list.
我的代码:
对于 colModel:
for colModel:
{ name: 'OwnerEmail', index: 'OwnerEmail', width: 200, align: "center", sortable: true, sorttype: 'text', editable: true, edittype: 'select', editrules: { required: true }, editoptions: { value: ownersList} },
我在选择行上填充下拉菜单(当我选择一行时，下拉菜单将被刷新)
I populate the dropdown on select row (that when I select a row, the dropdown will be refreshed)
onSelectRow: function (id) {
var advOwners = $.ajax({
type: 'POST',
data: {},
url: 'MyWebService.asmx/GetOwners',
async: false,
error: function () {
alert('An error has occured retrieving Owners!');
}
}).responseXML;
var aux = advOwners.getElementsByTagName("string");
ownersList = "";
for (var i = 0; i < aux.length; i++) {
ownersList += aux[i].childNodes[0].nodeValue + ':' + aux[i].childNodes[0].nodeValue + '; ';
}
ownersList = ownersList.substring(0, ownersList.length - 2);
jQuery("#GridView").setColProp('OwnerEmail', { editoptions: { value: ownersList} });
}
但是当我再次进入编辑/添加表单时，下拉菜单没有刷新，它有首先加载的项目.
But when I enter the edit/add form again, the dropdown it's not refreshed, it has the items that has been loaded in the first place.
有什么帮助吗?
谢谢，杰夫
推荐答案
我认为如果你使用 editoptions 而不是使用 value 属性.在这种情况下，您不需要在 onSelectRow 内使用同步 Ajax 调用来手动获取选择数据.如果需要数据，相应的调用将为您执行 jqGrid.
I think it will be better if you would use dataUrl property of the editoptions instead of usage value property. In the case you will don't need to use synchronous Ajax call inside of onSelectRow to get the select data manually. If the data will be needed the corresponding call will do jqGrid for you.
dataUrl 中的 URL 应返回 元素的 HTML 片段，包括所有 dataUrl 转换为实现相应 buildSelect 回调函数所需的格式.
The URL from dataUrl should return HTML fragment for <select> element including all <options>. So you can convert any other response from dataUrl to the required format implementing the corresponding buildSelect callback function.
在您的位置上，我更愿意从MyWebService.asmx/GetOwners"URL 返回 JSON 数据，而不是您当前执行的 XML 数据.在最简单的情况下，它可以是类似的网络方法
On your place I would prefer to return JSON data from the 'MyWebService.asmx/GetOwners' URL instead of XML data which you currently do. In the simplest case it could be web method like
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<string> GetSelectData() {
return new List<string> {
"User1", "User2", "User3", "User4"
};
}
如果您要使用 HTTP GET 而不是 HTTP POST，则应通过在 HTTP 标头中设置 Cache-Control: private, max-age=0 来防止使用缓存中的数据.相应的代码将是
If you would use HTTP GET instead of HTTP POST you should prevent usage of data from the cache by setting Cache-Control: private, max-age=0 in the HTTP header. the corresponding code will be
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public List<string> GetSelectData() {
HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0));
return new List<string> {
"User1", "User2", "User3", "User4"
};
}
默认情况下，jqGrid 在相应的 Ajax 调用中使用 dataType: "html"(参见 源代码).要将行为更改为 dataType: "json", contentType: "application/json" 您应该另外使用 jqGrid 的 ajaxSelectOptions 参数 as
Per default jqGrid use dataType: "html" in the corresponding Ajax call (see the source code). To change the behavior to dataType: "json", contentType: "application/json" you should use additionally the ajaxSelectOptions parameter of jqGrid as
ajaxSelectOptions: { contentType: "application/json", dataType: 'json' },
或作为
ajaxSelectOptions: {
contentType: "application/json",
dataType: 'json',
type: "POST"
},
如果您将使用 ASMX Web 服务的默认 HTTP POST.
if you will use HTTP POST which is default for ASMX web services.
colModel中列对应的设置为
edittype: 'select', editable: true,
editoptions: {
dataUrl: '/MyWebService.asmx/GetSelectData',
buildSelect: buildSelectFromJson
}
在哪里
var buildSelectFromJson = function (data) {
var html = '<select>', d = data.d, length = d.length, i = 0, item;
for (; i < length; i++) {
item = d[i];
html += '<option value=' + item + '>' + item + '</option>';
}
html += '</select>';
return html;
};
注意上面的代码使用了 data.d，这是 ASMX Web 服务所必需的.如果您要迁移到 ASP.NET MVC 或 WCF，您将需要删除 d 属性的使用并直接使用 data.
Be careful that the above code use data.d which is required in case of ASMX web services. If you would migrate to ASP.NET MVC or to WCF you will need remove the usage of d property and use data directly.
更新:这里你可以下载VS2010演示项目它实现了我上面写的.
UPDATED: Here you can download the VS2010 demo project which implements what I wrote above.
这篇关于JQGrid:编辑后如何刷新下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
