如何在jqgrid中为json嵌套数组制作子行

Question

我的本​​地json字符串如下：

var jsonObj = {
        "page": "1",
        "records": "2",
        "rows": [
{"id":"1","firstName":"ABC","lastName":"XYZ","city":"blr","state":"Karnataka","arr":[
{"arr1":"value1","arr2":"value2"},{"arr1":"value3","arr2":"value4"}]},
        {"id":"2","firstName":"DEF","lastName":"PQR","city":"Mumbai","state":"Maharashtra","arr":[{"arr1":"result1","arr2":"result2"},{"arr1":"result3","arr2":"result4"}]}]};

使用jqgrid 我想在两行中显示上面的 json 字符串，具有 id1 和 id2，但是对于嵌套数组（即上面字符串中的 arr）我想将它们显示为它们父行的子行但是不作为子网格。

子行中的其他列应包含作为父行的重复数据，但两列即 arr1 和 arr2 除外。 加载时子行不应该是可见的。点击应该有一个加号/三角形图标，子行应该展开。

这是我用来显示jqgrid的代码。

 $("#list").jqGrid({
                datastr : jsonObj,
                datatype : "jsonstring",
                colNames : [ 'Id', 'FirstName', 'LastName', 'City', 'State', 'Array1', 'Array2' ],
                colModel : [ {
                        name : 'id',
                        index : 'id',
                        width : 100,
                        key : true
                }, {
                        name : 'firstName',
                        index : 'firstName',
                        width : 150

                }, {
                        name : 'lastName',
                        index : 'lastName',
                        width : 150

                }, {
                        name : 'city',
                        index : 'city',
                        width : 100

                }, {
                        name : 'state',
                        index : 'state',
                        width : 100

                }, {
                        name : 'arr1',
                        index : 'arr1',
                        width : 100,
                        jsonmap : "arr.0.arr1"
                }, {

                        name : 'arr2',
                        index : 'arr2',
                        width : 100,
                        jsonmap : "arr.0.arr2"
                } ],
                pager : '#pager',
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                sortname : 'id',
                sortorder : 'desc',
                viewrecords : true,
                gridview : true,
                caption : 'JSON Array',
                jsonReader : {
                        repeatitems : false, root: "rows"
                }
        });

Answer 1

在我看来，您确实需要将子网格用作网格并根据父字符串的数据创建所需的子网格数据。查看the answer 了解更多详情。就像在引用的答案中一样，您可以使用getLocalRow 和父行ID 来获取父行的所有数据，并且您可以用父行数据中的两项数据填充数组。您可以像在演示中一样隐藏 subgrid 的列标题。