jqGrid子网格的JSON对象 [英] JSON Object for jqGrid subgrid

问题描述

这是jqGrid的子网格的JSON数据的第三个问题，直到现在我没有得到一个注释。请有人帮忙。

我的。

还有一个您所拥有的问题是您的数据中缺少ID。您应该修改数据的结构，以定义非常网格行和每个子网格行的唯一ID。您应该考虑这些注意事项，数据中的id将被用作ID为< tr> 元素，HTML不允许在一个HTML页面上具有id重复。

更新：请参阅这里修改JSON输入和jqGrid的示例，以便使用ids。

This is my 3rd question about JSON data for jqGrid's subgrid, till now I did not get a single comment. Please somebody help.

my 1st question
and the 2nd one

I am having trouble getting to know the json format to be used by a subgrid in jqGrid. In my 2nd question i asked about the format that I should be using for a particular scenario

for the given image

Is this the proper JSON String?

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
    }
]
};

If yes, my 1st question this is where i reached so far

$('#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});

Any type of suggestions/comments/solutions are welcome. Thanks

My output

解决方案

You code has small errors in the declaration of the myJSONObject variable and the code which create the contain of the div#compareContent should be fixed to

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

Small other syntax errors are the trailing commas in the colModel: the comma before ']' should be removed.

Now to your main problem. You should change datastr : myJSONObject in the subgrid to something like

datastr : myJSONObject.list[0]

then the modified demo will show the data: see here.

One more problem which you has is the absent of ids in your data. You should modify the structure of the data to define the unique ids for very grid row and every subgrid row. You should take in the considerations that ids from the data will be used as id of <tr> elements and HTML don't permit to have id duplicates on one HTML page.

UPDATED: See here an example of modification of your JSON input and the jqGrid so that ids will be used.

这篇关于jqGrid子网格的JSON对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！