[转]jqGrid Dynamically loading select options

最新推荐文章于 2023-05-25 17:15:46 发布

原创最新推荐文章于 2023-05-25 17:15:46 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #json #.net #HTML

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在jqGrid中动态加载HTML SELECT标签的选项值，而非硬编码。通过AJAX请求获取国家列表，并设置为同步加载确保数据在定义网格前已返回。此方法适用于需要动态更新列表的情况。

转自：http://geekswithblogs.net/renso/archive/2009/07/02/jqgrid-dynamically-loading-select-options.aspx

Scenario: You are using the jqGrid to edit rows that contain fields that are of HTML tag type "SELECT".

Problem: You do not want to hard code the values of the select tag like in the jqGrid samples. For example:

editoption: { value: "FE:FedEx; IN:InTime; TN:TNT" }

Solution: For example to load a list of countries dynamically, define the variable before the definition of the jqGrid:

//get all countries
var countries = $.ajax({url: $('#ajaxAllCountriesUrl').val(), async: false, success: function(data, result) {if (!result) alert('Failure to retrieve the Countries.');}}).responseText;

Now define your jqGrid:

$(yourgrid).jqGrid({
...
colModel: [
{ name: 'Id', index: 'Id', width: 20, sortable: true, align: "center", editable: false, editoptions: { readonly: true, size: 0 }, search: true },

{ name: 'Country', index: 'Country', width: 80, sortable: true, editable: true, edittype: "select", editrules: { required: true }, editoptions: { size: 71} }
],
...
loadComplete: function() {
$(yourgrid).setColProp('Country', { editoptions: { value: countries} });
},
...

Important: The ajax call to retrieve the countries must be set to "async: false" otherwise you have a very good chance that the grid will be defined before the data is actually returned. Using the same logic you can reload the list based on some other event and trigger the reload of the grid if need be to reload the new list.

The format of the country object is a JSON object and looks like this:

{"Countries":{"Content":"230:UNITED STATES;40:CANADA;7:AFGHANISTAN; etc.....   }}