jqGrid 子网格的 JSON 对象

这是我关于 jqGrid 子网格的 JSON 数据的第三个问题，到目前为止我还没有得到任何评论。请有人帮忙。

my 第一个问题 https://stackoverflow.com/questions/6647302/subgrid-in-jqgrid
和2nd one https://stackoverflow.com/questions/6647850/json-string-for-my-jqgrid-subgrid

我无法了解 jqGrid 中子网格使用的 json 格式。在我的第二个问题中，我询问了我应该用于特定场景的格式

for the given image

这是正确的 JSON 字符串吗？

var myJSONObject = {
"list": [
    {
        "elementName": "TERM",
        "attribute": [
            {
                "name": "information",
                "firstValue": "Required fixes for AIX",
                "secondValue": "Required fixes for AIX"
            },
            {
                "name": "name",
                "firstValue": "PHCO_34",
                "secondValue": "PHCO_34"
            },
            {
                "name": "version",
                "firstValue": "1.0",
                "secondValue": "2.0"
            }
        ],
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": false
    },
    {
        "elementName": "Asian-Core.ASX-JPN-MAN",
        "attribute": [
            {
                "name": "information",
                "firstValue": "Man",
                "secondValue": "Man"
            },
            {
                "name": "name",
                "firstValue": "Asian-Core.ASX-JPN-MAN",
                "secondValue": "Asian-Core.ASX-JPN-MAN"
            },
            {
                "name": "version",
                "firstValue": "B.11.23",
                "secondValue": "B.11.23"
            }
        ],
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true
    }
]
};

如果是的话，我的第一个问题这就是我到目前为止到达的地方

$('#compareContent').empty();
    $('<div id="compareParentDiv" width="100%">')
    .html('<table id="list2" cellspacing="0" cellpadding="0"></table>'+
            '<div id="gridpager2"></div></div>')
    .appendTo('#compareContent');

    var grid = jQuery("#list2");

    grid.jqGrid({
        datastr : myJSONObject,
        datatype: 'jsonstring',

        colNames:['Name','Result1', 'Result2'],
        colModel:[
            {name:'elementName',index:'elementName', width:90},
            {name:'isPrasentinXml1',index:'isPrasentinXml1', width:100},
            {name:'isPrasentinXml2',index:'isPrasentinXml2', width:100},
        ],
        pager : '#gridpager2',
        rowNum:10,
        scrollOffset:0,
        height: 'auto',

        autowidth:true,
        viewrecords: true,
        gridview: true,
        jsonReader: { repeatitems : false, root:"list" },
        subGrid: true,

        /*subGridModel: [{
            //subgrid columns names
            name: ['Name', 'Version', 'Information'],
            //subgrid columns widths
            width: [200, 100, 100],
            //subrig columns aligns
            align: ['left', 'left', 'left']

          }]*/

        // define the icons in subgrid
        subGridOptions: {
            "plusicon"  : "ui-icon-triangle-1-e",
            "minusicon" : "ui-icon-triangle-1-s",
            "openicon"  : "ui-icon-arrowreturn-1-e",
            //expand all rows on load
            "expandOnLoad" : true
        },
        subGridRowExpanded: function(subgrid_id, row_id) {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id+"_t";
            pager_id = "p_"+subgrid_table_id;
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
            jQuery("#"+subgrid_table_id).jqGrid({
                datastr : myJSONObject,
                datatype: 'jsonstring',
                colNames: ['Name','Value1','Value2'],
                colModel: [
                    {name:"name",index:"name",width:90},
                    {name:"firstValue",index:"firstValue",width:100},
                    {name:"secondValue",index:"secondValue",width:100},
                ],
                rowNum:20,
                pager: pager_id,
                sortname: 'name',
                sortorder: "asc",
                height: 'auto',
                autowidth:true,
                jsonReader: { repeatitems : false, root:"attribute" }
            });
            jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
        }
    });
    grid.jqGrid('navGrid','#gridpager2',{add:false,edit:false,del:false});

欢迎任何类型的建议/评论/解决方案。谢谢

我的输出

您的代码在声明中存在小错误myJSONObject变量和创建包含的代码div#compareContent应固定为

$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">'+
  '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
        '<div id="gridpager2"></div></div>')
.appendTo('#compareContent');

其他小的语法错误是尾随逗号colModel: 应删除“]”之前的逗号。

现在解决你的主要问题。你应该改变datastr : myJSONObject在子网格中类似

datastr : myJSONObject.list[0]

然后修改后的演示将显示数据：参见here http://www.ok-soft-gmbh.com/jqGrid/abhisheksimon.htm.

您遇到的另一个问题是数据中缺少 id。您应该修改数据结构来定义每个网格行和每个子网格行的唯一 ID。您应该考虑到数据中的 id 将用作 的 id<tr>elements 和 HTML 不允许在一个 HTML 页面上有重复的 id。

UPDATED: See here http://www.ok-soft-gmbh.com/jqGrid/abhisheksimon1.htm修改 JSON 输入和 jqGrid 以便使用 ids 的示例。