jqGrid 子网格的 JSON 对象

Question

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

我的1st question
还有 2nd one

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

对于给定的图像

这是正确的 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});

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

我的输出

Answer 1

您的代码在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]

那么修改后的demo会显示数据：见here。

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

更新：请参阅here 修改 JSON 输入和 jqGrid 以便使用 id 的示例。

Answer 2

一些可能/可能不会锻炼的建议

当使用子网格时，选择网格为

var mygrid = jQuery("#mygrid")[0];

替换

var grid = jQuery("#list2");

与

var grid = jQuery("#list2")[0];

参考：http://www.trirand.com/blog/?page_id=393/help/2-questions-about-jqgrid-subgrid-and-jsonstring

还将您的 json 更改为 valid json

{
    "list": [
        {
            "elementName": "TERM",
            "attribute": [
                {
                    "name": "information",
                    "firstValue": "RequiredfixesforAIX",
                    "secondValue": "RequiredfixesforAIX"
                },
                {
                    "name": "name",
                    "firstValue": "PHCO_34",
                    "secondValue": "PHCO_34"
                },
                {
                    "name": "version",
                    "firstValue": "1.0",
                    "secondValue": "2.0"
                }
            ],
            "isEqual": false,
            "isPrasentinXml1": true,
            "isPrasentinXml2": false
        }
    ]
}

由 www.jsonlint.com 验证

您可能会发现以下链接很有用

jqGrid with JSON data renders table as empty