拡張 JSON 応答を使用して jqGrid 選択オプションを動的に設定する方法は?

jqGrid で間接データを表示

jqGrid は、間接データを表示するための「選択」フォーマッタを提供します。ただし、このフォーマッタには動的充填オプションの点で制限があります。この問題を解決するには、サーバーからの JSON 応答を拡張して、選択オプションの入力に使用される追加データを含めることができます。

元の質問:

データ構造は次のとおりです:

SID	SNAME	CITY
1	ABC	11
2	XYZ	12
3	ACX	13
4	KHG	14
5	ADF	15
6	KKR	16

別の表には都市名が示されています:

CID	CNAME
11	Chennai
12	Mumbai
13	Delhi

目標は、データを次のように表示することです:

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

拡張 JSON 応答を使用したソリューション:

サーバーは、JSON 応答を拡張して、都市 ID を都市名にマッピングする「cityMap」属性を含めることができます。

<code>{
    "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 構成:

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

このアプローチにより、サーバーからのデータに基づいて選択オプションを動的に設定できます。これを使用して、サーバー データに基づいて他の列オプションを動的に設定することもできます。

以上が拡張 JSON 応答を使用して jqGrid 選択オプションを動的に設定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。