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

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

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

在您的位置,我更愿意从"MyWebService.asmx/GetOwners"URL返回JSON数据,而不是您当前所做的XML数据.在最简单的情况下,它可能是web方法

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<string> GetSelectData() {
    return new List<string> {
        "User1", "User2", "User3", "User4"
    };
}

如果您使用HTTP GET而不是HTTP POST,则应通过Cache-Control: private, max-age=0在HTTP标头中设置来阻止从缓存中使用数据.相应的代码将是

[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 dataType: "html"在相应的Ajax调用中使用(参见源代码).要改变行为,dataType: "json", contentType: "application/json"你应该另外使用ajaxSelectOptionsjqGrid 的参数

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.dASMX Web服务所需的代码.如果要迁移到ASP.NET MVC或WCF,则需要删除d属性的使用并data直接使用.

更新:在这里你可以下载VS2010演示项目,它实现了我上面写的内容.