[转]jqGrid Dynamically loading select options

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