How to Dynamically Populate jqGrid Select Options Using Extended JSON Responses?

Display indirect data in jqGrid

jqGrid provides "select" formatter to display indirect data. However, this formatter has limitations in terms of dynamic filling options. To overcome this problem, the JSON response from the server can be extended to include additional data used to populate the selection options.

Original question:

The data structure is as follows:

SID	SNAME	CITY
1	ABC	11
2	XYZ	12
3	ACX	13
4	KHG	14
5	ADF	15
6	KKR	16

Another table provides city names:

CID	CNAME
11	Chennai
12	Mumbai
13	Delhi

The goal is to display the data as:

SID	SNAME	CITY
1	ABC	Chennai
2	XYZ	Mumbai
3	ACX	Delhi
4	KHG	Banglore
5	ADF	Hyderabad
6	KKR	Kolkatta

Solution using extended JSON response:

The server can extend the JSON response to include a "cityMap" attribute that maps city IDs to city names:

<code>{
    "cityMap": {"11": "Chennai", "12": "Mumbai", "13": "Delhi"},
    "rows": [
        { "SID": "1",  "SNAME": "ABC", "CITY": "11" },
        { "SID": "2",  "SNAME": "XYZ", "CITY": "12" },
        { "SID": "3",  "SNAME": "ACX", "CITY": "13" },
        { "SID": "4",  "SNAME": "KHG", "CITY": "13" },
        { "SID": "5",  "SNAME": "ADF", "CITY": "12" },
        { "SID": "6",  "SNAME": "KKR", "CITY": "11" }
    ]
}</code>

jqGrid configuration:

<code>colModel: [
    {name: "SNAME", width: 250},
    {name: "CITY", width: 180, align: "center"}
],
beforeProcessing: function (response) {
    var $self = $(this);
    $self.jqGrid("setColProp", "CITY", {
        formatter: "select",
        edittype: "select",
        editoptions: {
            value: $.isPlainObject(response.cityMap) ? response.cityMap : []
        }
    });
},
jsonReader: { id: "SID"}</code>

This approach allows selection options to be dynamically populated based on data from the server. It can also be used to dynamically set other column options based on server data.

The above is the detailed content of How to Dynamically Populate jqGrid Select Options Using Extended JSON Responses?. For more information, please follow other related articles on the PHP Chinese website!