Объект JSON для подсетки jqGrid

Question

Это мой третий вопрос о данных JSON для подсетки jqGrid, до сих пор я не получил ни одного комментария. Пожалуйста, помогите.

мой 1-й вопрос
и 2й

У меня проблемы со знакомством с форматом json, который будет использоваться подсетью в jqGrid. Во втором вопросе я спросил о формате, который я должен использовать для определенного сценария

для данного изображения

Это правильная строка 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
    }
]
};

Если да, мой 1-й вопрос Это то, чего я достиг до сих пор

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

Любые предложения / комментарии / решения приветствуются. Спасибо

Мой вывод

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]

тогда измененная демка покажет данные: см здесь .

Еще одна проблема, с которой вы сталкиваетесь - это отсутствие идентификаторов в ваших данных. Вы должны изменить структуру данных, чтобы определить уникальные идентификаторы для самой строки сетки и каждой строки подсетки. Следует учитывать, что идентификаторы данных будут использоваться как идентификаторы элементов <tr>, а HTML не позволяет иметь дубликаты идентификаторов на одной странице HTML.

ОБНОВЛЕНО : См. здесь пример изменения вашего ввода JSON и jqGrid для использования идентификаторов.

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 с данными JSON отображает таблицу как пустую