Oggetto JSON per il sottogruppo jqGrid

Questa è la mia terza domanda su dati JSON per la sottogruppo di jqGrid, finora non ho ricevuto un solo commento. Per favore qualcuno aiuta.

la mia prima domanda
e la seconda

Ho difficoltà a conoscere il formato json da utilizzare da una sottogruppo in jqGrid. Nella mia seconda domanda ho chiesto il formato che dovrei utilizzare per uno scenario particolare

per l'image data immettere qui la descrizione dell'immagine

È questo il corretto 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 } ] }; 

Se sì, la mia prima domanda qui è where ho raggiunto finora

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

Qualsiasi tipo di suggerimenti / commenti / soluzioni sono benvenuti. Grazie

La mia output

immettere qui la descrizione dell'immagine

Il codice ha piccoli errori nella dichiarazione della variabile myJSONObject e il codice che crea il contenuto del div#compareContent dovrebbe essere fissato a

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

Piccoli altri errori di syntax sono le virgole in output del colModel : la virgola prima di ']' deve essere rimossa.

Ora al tuo problema principale. Dovresti cambiare datastr : myJSONObject nel sottogruppo a qualcosa di simile

 datastr : myJSONObject.list[0] 

quindi la demo modificata mostrerà i dati: vedi qui .

Un altro problema che hai è l'assenza di ids nei tuoi dati. È necessario modificare la struttura dei dati per definire gli ID univoche per la row di griglia e per each row di sottogrù. Dovresti prendere in considerazione che gli ids dai dati verranno utilizzati come id di elementi <tr> e l'HTML non consente di avere duplicati id su una pagina HTML.

AGGIORNATO : vedi qui un esempio di modifica dell'ingresso JSON e del jqGrid in modo che gli ids verranno utilizzati.

un paio di suggerimenti che possono / non possono allenarsi

quando si utilizza subgrid select la griglia come

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

sostituire

 var grid = jQuery("#list2"); 

con

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

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

anche cambiare il tuo json ad un json valid

 { "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 } ] } 

verfified da http://www.jsonlint.com

potresti trovare utile il seguente collegamento

jqGrid con dati JSON rende la tabella vuota