jqgrid列顺序答案

【问题标题】：jqgrid columns orderjqgrid列顺序
【发布时间】：2013-02-02 05:41:38
【问题描述】：

我有从 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"]}
]
}

如何将显示列的顺序更改为例如名称、城市、街道、ID 不改变 json 数据中的顺序？

【问题讨论】：

我试过了，但我找不到如何改变它。我发现只有函数 remapColumns 不能按我的意愿工作
我通过函数 remapColumns 资助了一种方法，例如$('#list').remapColumns([1,3,2,0], true, false]);但是当你有额外的列时应该小心，例如rownumbers: true 或 subgrid 展开列。此列也可以重新排序。

标签： jqgrid

【解决方案1】：

在表单中使用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" }
});

The corresponding demo 看起来像

在更复杂的情况下，可以使用jsonmap 作为函数，从代表行的对象中读取列的项目。例如，可以将'Id' 列的定义重写为以下内容

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

The modified demo 显示相同的结果。

【讨论】：