我有jqgrid从json服务
读取数据$('#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"]}
]
}
如何将显示列的顺序更改为例如名称,城市,街道,Id,而不更改json数据中的顺序?
答案 0 :(得分: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];
}}
The modified demo显示相同的结果。