JQGrid：如何在编辑后刷新下拉菜单？

在我的应用程序中，我使用JQGrid加载一些联系人数据，当我编辑/添加条目时，我从数据库中选择联系人的姓名，然后更新/添加联系人。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} }); 
      }

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

任何帮助？

感谢，杰夫

来源

2011-10-24 Jeff Norman

我认为这将是更好，如果你会使用editoptions的dataUrl属性，而不是使用value财产。在这种情况下，您不需要使用onSelectRow内部的同步Ajax调用手动获取选择数据。如果需要数据，相应的调用将为你做jqGrid。

来自dataUrl的URL应该返回包含所有<options>的<select>元素的HTML片段。因此，您可以将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" 
    }; 
}

Web方法，如果您使用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调用（见the source code）使用dataType: "html"。要改变行为以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。

UPDATED：Here你可以下载VS2010演示项目，它实现了我上面写的。

来源

2011-10-24 14:36:18 Oleg

我按照你的意见和改变了代码，但它从来没有进入GetSelectData web方法.. –

@Jeff Norman：如果你愿意，我可以上传一个我用来验证我的建议的演示项目。 – Oleg

是的，请奥列格 –

JQGrid：如何在编辑后刷新下拉菜单？

回答

相关问题