Bagaimana untuk Memaparkan Data daripada Berbilang Jadual dalam jqGrid Menggunakan Respons JSON dengan Pemetaan Bandar?

jqGrid: Mengendalikan Data daripada Berbilang Jadual Berkaitan

jqGrid, pemalam jQuery yang berkuasa, cemerlang dalam memaparkan data daripada pelbagai sumber. Contoh ini menunjukkan cara membentangkan data dengan cekap daripada dua jadual yang saling berkaitan: Students dan Cities.

Jadual Students menggunakan ID bandar sebagai kunci asing, merujuk jadual Cities untuk nama bandar:

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

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

Format output yang diingini ialah jqGrid tunggal yang memaparkan maklumat pelajar dengan nama bandar sebenar:

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

Untuk mencapai matlamat ini, respons sebelah pelayan distrukturkan untuk memasukkan cityMap yang menterjemahkan ID bandar kepada nama:

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

Kod jqGrid pihak pelanggan memanfaatkan acara beforeProcessing untuk mengemas kini sifat lajur secara dinamik menggunakan cityMap. Ini memastikan nama bandar yang betul dipaparkan. Pilihan formatter: "select" tidak digunakan secara langsung di sini, tetapi prinsip mengemas kini pilihan lajur secara dinamik pada masa jalan tetap sama.

Berikut ialah perwakilan ringkas bagi kod sisi pelanggan:

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

Fungsi beforeProcessing akan menggunakan cityMap daripada respons untuk menggantikan ID bandar berangka dalam data rows dengan nama bandar yang sepadan sebelum jqGrid memaparkan grid. Pendekatan ini mengelakkan manipulasi data sisi klien yang rumit dan memastikan logiknya ringkas.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Data daripada Berbilang Jadual dalam jqGrid Menggunakan Respons JSON dengan Pemetaan Bandar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!