3

JSONサービスからデータを読み取るjqgridがあります

$('#list').jqGrid({
    url: 'jsonservice',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Id', 'Name', 'Street', 'City'],
    colModel: [
    { name: 'Id', index: 'Id', width: 55, align: 'center', width: '25' }
    { name: 'Name', index: 'Name', width: 120 },
    { name: 'Street', index: 'Street', width: 90 },
    { name: 'City', index: 'City', width: 50 },
    ]
});

json サービスは次のようなデータを返します

{"page":1,
"total":37,
"records":722,
"rows":
[
    {"id":1,"cell":[1, "Sample name 1","Sample Street 2","Sample City 3"]},
    {"id":2,"cell":[2, "Sample name 2","Sample Street 2","Sample City 3"]}
]
}

JSONデータの順序を変更せずに、表示される列の順序を名前、都市、通り、IDなどに変更するにはどうすればよいですか?

4

1 に答える 1

2

フォームでjsonReaderを使用する最も簡単な方法

jsonReader: {repeatitems: false, id: "Id"}

行を表すデータが、名前付きプロパティを持つオブジェクトである必要がある場合:

{
    "page": 1,
    "total": 37,
    "records": 722,
    "rows": [
        {"Id":1, "Name":"Sample name 1", "Street":"Sample Street 2", "City":"Sample City 3"},
        {"Id":2, "Name":"Sample name 2", "Street":"Sample Street 2", "City":"Sample City 3"}
    ]
}

この形式の主な欠点は、転送されるデータのサイズが大きくなることです。それにもかかわらず、それはあなたの問題を解決する最も簡単な方法です.

repeatitems: falseと組み合わせて使用​​する方法もありますjsonmap。データ行から各列のデータを読み取る方法を指定できます。ドット付きの名前を使用できますjsonmap:

$('#list').jqGrid({
    url: 'Marcin.json',
    datatype: 'json',
    colNames: ['Name', 'Street', 'City', 'Id'],
    colModel: [
        { name: 'Name', width: 120, jsonmap: "cell.1" },
        { name: 'Street', width: 190, jsonmap: "cell.2" },
        { name: 'City', width: 90, jsonmap: "cell.3" },
        { name: 'Id', width: 55, align: 'center', jsonmap: "cell.0" }
    ],
    height: "auto",
    gridview: true,
    jsonReader: { repeatitems: false, id: "Id" }
});

対応するデモは次のようになります

ここに画像の説明を入力

より複雑なケースjsonmapでは、行を表すオブジェクトから列の項目を読み取る関数として使用できます。たとえば、列の定義を'Id'次のように書き換えることができます

{ name: 'Id', width: 55, align: 'center',
    jsonmap: function (obj) { // "cell.0"
        return obj.cell[0];
    }}

変更されたデモは同じ結果を表示します。

于 2013-02-17T22:02:56.783 に答える