Wie zeige ich Daten aus mehreren Tabellen in jqGrid mithilfe einer JSON-Antwort mit City Mapping an?

jqGrid: Umgang mit Daten aus mehreren verwandten Tabellen

jqGrid, ein leistungsstarkes jQuery-Plugin, zeichnet sich durch die Anzeige von Daten aus verschiedenen Quellen aus. Dieses Beispiel zeigt, wie Daten aus zwei miteinander verbundenen Tabellen effizient dargestellt werden: Students und Cities.

Die Students-Tabelle verwendet Stadt-IDs als Fremdschlüssel und verweist auf die Cities-Tabelle für Städtenamen:

<code>Students:
| SID | SNAME | CITY |
|---|---|---|
| 1 | ABC | 11 |
| 2 | XYZ | 12 |
| 3 | ACX | 13 |

Cities:
| CID | CNAME |
|---|---|
| 11 | Chennai |
| 12 | Mumbai |
| 13 | Delhi |</code>

Das gewünschte Ausgabeformat ist ein einzelnes jqGrid, das Studenteninformationen mit den tatsächlichen Städtenamen anzeigt:

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

Um dies zu erreichen, ist die serverseitige Antwort so strukturiert, dass sie ein cityMap enthält, das Stadt-IDs in Namen übersetzt:

<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>

Der clientseitige jqGrid-Code nutzt das Ereignis beforeProcessing, um Spalteneigenschaften mithilfe von cityMap dynamisch zu aktualisieren. Dadurch wird sichergestellt, dass die korrekten Städtenamen angezeigt werden. Die Option formatter: "select" wird hier nicht direkt verwendet, aber das Prinzip der dynamischen Aktualisierung der Spaltenoptionen zur Laufzeit bleibt dasselbe.

Hier ist eine vereinfachte Darstellung des clientseitigen Codes:

<code class="language-javascript">var filterToolbarOptions = {defaultSearch: "cn", stringResult: true, searchOperators: true},
    removeAnyOption = function ($form) { /* ... (function remains unchanged) ... */ },
    $grid = $("#list");

// ... (other code remains largely unchanged) ...

$grid.jqGrid({
    // ... (colModel remains largely unchanged) ...
    beforeProcessing: function (response) {
        // ... (logic to handle cityMap and update column properties) ...
    },
    jsonReader: { id: "SID"}
});
// ... (rest of the code remains largely unchanged) ...</code>

Die beforeProcessing-Funktion würde das cityMap aus der Antwort verwenden, um die numerischen Stadt-IDs in den rows-Daten durch die entsprechenden Städtenamen zu ersetzen, bevor jqGrid das Raster rendert. Dieser Ansatz vermeidet komplexe clientseitige Datenmanipulationen und hält die Logik prägnant.

Das obige ist der detaillierte Inhalt vonWie zeige ich Daten aus mehreren Tabellen in jqGrid mithilfe einer JSON-Antwort mit City Mapping an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!