[转]jqGrid Dynamically loading select options-优快云博客

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：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.....   }}