JQGrid：编辑后如何刷新下拉列表？

Question

在我的应用程序中，我使用 JQGrid 加载一些联系人数据，当我编辑/添加条目时，我从数据库中选择联系人的姓名，然后更新/添加联系人。

我的问题是，当我单击提交按钮时，我想刷新下拉列表，并且已经输入的数据从下拉列表中消失。

我的代码：

对于 colModel：

{ name: 'OwnerEmail', index: 'OwnerEmail', width: 200, align: "center", sortable: true, sorttype: 'text', editable: true, edittype: 'select', editrules: { required: true }, editoptions: { value: ownersList} },

我在选择行上填充下拉菜单（当我选择一行时，下拉菜单将被刷新）

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} });
             }

但是当我再次进入编辑/添加表单时，下拉菜单没有刷新，它有首先加载的项目。

有什么帮助吗？

谢谢， 杰夫

Answer 1

我认为最好使用editoptions 的dataUrl 属性而不是使用value 属性。在这种情况下，您不需要在 onSelectRow 中使用同步 Ajax 调用来手动获取选择数据。如果需要数据，相应的调用将为您执行 jqGrid。

dataUrl 的 URL 应返回 <select> 元素的 HTML 片段，包括所有 <options>。因此，您可以将来自dataUrl 的任何其他响应转换为实现相应buildSelect 回调函数所需的格式。

在您的位置上，我更愿意从“MyWebService.asmx/GetOwners”URL 返回 JSON 数据，而不是您当前执行的 XML 数据。在最简单的情况下，它可以是类似的网络方法

[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 来防止使用缓存中的数据。相应的代码将是

[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"（参见the source code）。要将行为更改为 dataType: "json", contentType: "application/json"，您应该另外使用 jqGrid 的 ajaxSelectOptions 参数作为

ajaxSelectOptions: { contentType: "application/json", dataType: 'json' },

或作为

ajaxSelectOptions: {
    contentType: "application/json",
    dataType: 'json',
    type: "POST"
},

如果您将使用 ASMX Web 服务的默认 HTTP POST。

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。

更新：Here你可以下载实现我上面写的VS2010演示项目。