How to Display City Names Instead of IDs in Jqgrid Using Server-Side Extensions?

Jqgrid Server-Side Extensions: Handling Indirect Data Relationships

This guide demonstrates how to display descriptive city names instead of numerical IDs within a Jqgrid, leveraging server-side extensions to manage indirect data relationships. The example involves two tables: Students (SID, SNAME, CITY) and Locations (CID, CNAME). The challenge lies in presenting CNAME (city name) in the Jqgrid's CITY column, which currently stores CID (city ID). Direct database joins are unsuitable due to the Student class's data structure.

The solution involves augmenting the server's JSON response to include the necessary mapping information. We introduce a colModelOptions property to dynamically configure the CITY column:

<code class="language-json">{
    "colModelOptions": {
        "CITY": {
            "formatter": "select",
            "edittype": "select",
            "editoptions": {
                "value": "11:Chennai;13:Delhi;12:Mumbai"
            },
            "stype": "select",
            "searchoptions": {
                "sopt": [ "eq", "ne" ],
                "value": ":Any;11:Chennai;13:Delhi;12:Mumbai"
            }
        }
    },
    "rows": [
        { "SID": "1",  "SNAME": "ABC", "CITY": "11" },
        // ... more rows
    ]
}</code>

This JSON response provides Jqgrid with the necessary data to display city names. The editoptions.value property defines the mapping between IDs and names.

The Jqgrid's beforeProcessing event handler dynamically applies these column options:

<code class="language-javascript">beforeProcessing: function (response) {
    var $self = $(this), options = response.colModelOptions, p;
    if (options != null) {
        for (p in options) {
            if (options.hasOwnProperty(p)) {
                $self.jqGrid("setColProp", p, options[p]);
                // ... any additional processing
            }
        }
    }
}</code>

This code iterates through colModelOptions, updating the CITY column's properties within Jqgrid. This dynamic configuration ensures that city names are displayed instead of IDs, resulting in a more user-friendly and intuitive grid. This method effectively manages indirect data relationships without altering the database structure or using inefficient client-side lookups.

The above is the detailed content of How to Display City Names Instead of IDs in Jqgrid Using Server-Side Extensions?. For more information, please follow other related articles on the PHP Chinese website!