都市マッピングを含む JSON 応答を使用して jqGrid の複数のテーブルからのデータを表示するにはどうすればよいですか?

jqGrid: 複数の関連テーブルからのデータの処理

jqGrid は強力な jQuery プラグインであり、さまざまなソースからのデータの表示に優れています。この例では、相互接続された 2 つのテーブル Students と Cities.

からのデータを効率的に表示する方法を示します。

Students テーブルは都市 ID を外部キーとして使用し、都市名の Cities テーブルを参照します。

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

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

望ましい出力形式は、実際の都市名を含む学生情報を表示する単一の jqGrid です。

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

これを実現するために、サーバー側の応答は都市 ID を名前に変換する cityMap を含むように構造化されています。

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

クライアント側の jqGrid コードは、beforeProcessing イベントを利用して、cityMap を使用して列プロパティを動的に更新します。これにより、正しい都市名が表示されます。 formatter: "select" オプションはここでは直接使用されていませんが、実行時に列オプションを動的に更新する原則は同じです。

クライアント側のコードを簡略化して表したものが次のとおりです。

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

beforeProcessing 関数は、jqGrid がグリッドをレンダリングする前に、応答の cityMap を使用して、rows データ内の数値都市 ID を対応する都市名に置き換えます。 このアプローチにより、クライアント側での複雑なデータ操作が回避され、ロジックが簡潔に保たれます。

以上が都市マッピングを含む JSON 応答を使用して jqGrid の複数のテーブルからのデータを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。