How Can I Display Indirect Data (e.g., City Names from IDs) in a jqGrid?

jqGrid: Handling indirect data display

When dealing with tabular data, you often need to display data from different tables. For example, if you have a main table that contains student names and city IDs, and another table that maps city IDs to actual city names, you might want to display city names in the grid instead of city IDs.

Limitations of direct connection method

A common approach is to join these tables based on the city ID field. However, this approach becomes impractical if you are using a class structure that contains a city ID field instead of the actual city name.

Solution: Use lookup function to decode ID

To solve this problem, jqGrid provides the formatter: "select" function. This function allows you to decode a city ID into the corresponding city name. However, it requires a value map to perform this decoding, and this map needs to be set before jqGrid processes the server response.

The recommended approach is to extend your server response with an additional editoptions.value attribute data that will be used for the column using the "select" formatter. This extended response can be in the following format:

<code class="language-json">{
    "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>

In your jqGrid settings you can configure the columns as follows:

<code class="language-javascript">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 method allows you to dynamically set column options based on data received from the server. It also gives you the flexibility to implement more complex scenarios, such as specifying language preferences or handling large numbers of items in a selection element.

The above is the detailed content of How Can I Display Indirect Data (e.g., City Names from IDs) in a jqGrid?. For more information, please follow other related articles on the PHP Chinese website!