Question

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

我的问题是，当我点击提交按钮时，我想刷新下拉列表以及已经输入的数据从下拉列表中删除。

我的代码：

for 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的网址应返回<select>元素的HTML片段，包括所有<options>。因此，您可以将dataUrl中的任何其他响应转换为实现相应buildSelect回调函数所需的格式。

在您的位置，我更愿意从“MyWebService.asmx / GetOwners”网址返回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"
},

如果您将使用HTTP POST，这是ASMX Web服务的默认设置。

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演示项目，该项目实现了我上面所写的内容。

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

1 个答案: