Question

{
    "InventoryId": "51",
    "AssetID": "23",
    "FieldData": [
        {
            "Field": "Field 1"
        },
        {
            "Field": "Field 2"
        },
        {
            "Field": "Field 3"
        },
        {
            "Field": "Field 4"
        }
    ]
}

这是我的JSON数据的一部分。如何将此数据绑定到JQgrid？我需要以下结构中的网格

AssetID | InventoryId | Field1 | Field 2 | Field 3 | Field 4
============================================================
        |             |        |         |         |
        |             |        |         |         |

Answer 1

必须使用colModel，jsonmap，jsonmap: "FieldData.0.Field"等格式jsonmap: "FieldData.1.Field"生成jsonmap: "FieldData.2.Field"个元素，依此类推：

var mydata = [
        ...
    ],
    myColModel = [
        { name: "AssetID", label: "Asset ID", key: true,
            width: 70, template: "integer", frozen: true },
        { name: "InventoryId", label: "Inventory Id",
            width: 90, template: "integer", frozen: true }
    ];

for (i = 0; i < mydata[0].FieldData.length; i++) {
    myColModel.push({
        name: "field" + (i + 1),
        label: "Field " + (i + 1),
        jsonmap: "FieldData." + i + ".Field"
    });
}

$("#grid").jqGrid({
    data: mydata,
    colModel: myColModel,
    ...
});

相应的演示是https://jsfiddle.net/OlegKi/ga9m44wm/

可以使用回调函数作为jsonmap的值。例如，可以使用

jsonmap: function (item) {
    return item.FieldData[0].Field;
}

第一栏

，

jsonmap: function (item) {
    return item.FieldData[1].Field;
}

表示第二列，依此类推。要为jsonmap colModel属性动态生成相应的函数，可以使用闭包：

for (i = 0; i < mydata[0].FieldData.length; i++) {
    myColModel.push({
        name: "field" + (i + 1),
        label: "Field " + (i + 1),
        jsonmap: (function (index) {
            return function (item) {
                return item.FieldData[index].Field;
            }
        })(i)
    });
}

请参阅https://jsfiddle.net/OlegKi/ga9m44wm/1/

还有一些其他重要的事情，在从服务器加载数据和使用loadonce: true选项时必须遵循这些事项。应该使用的附加选项取决于您使用的jqGrid的版本以及您使用的jqGrid的分支。我在我的演示中使用free jqGrid 4.13.5，jqGrid的分支，我从2014年底开始开发。因为你仍然使用复古版本4.3.3，我试图为你提供代码，它只使用jqGrid最古老的功能。

如何将嵌套JSON绑定到同一行中的Jqgrid

1 个答案: