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.

有帮助吗?

谢谢， 杰夫

推荐答案

我认为，如果您使用

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应该返回<select>元素的HTML片段，包括所有<options>.因此，您可以将任何其他响应从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数据.在最简单的情况下，它可能是Web方法，例如

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参数为

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屋！