subgrid jqgrid de un único json nested

Quiero usar jqgrid con subgrids anidadas. Sin embargo, los únicos ejemplos que he encontrado rellenan la cuadrícula principal con una llamada de datos de carga url y llamadas separadas para poblar las subredes.

Los datos de mi subred existen como documentos nesteds en una estructura JSON, como se muestra en el siguiente fragmento (quiero que los capítulos aparezcan como sub-redes del libro, y los archivos como sub-cuadrículas dentro de los capítulos).

¿Puedo crear sub-cuadrículas a partir de documentos JSON nesteds con jqgrid?

{ _id: {"509403957ae7d3929edcb812"}, name: {"MYBOOK"}, layout: { chapters [ { name: "myfirstchapter", sequence: 1, title: "My First Chapter", files: [ { filetype: "tex", name: "myfirstfile" }, { filetype: "tmpl", name: "myfileb", } ], }, { name: "mysecondchapter", sequence: 2, title: "My Second Chapter", files: [ { filetype: "tex", name: "myintro" }, { filetype: "tex", name: "myfilec", } ], ], } } 

Hice la demostración que demuestra cómo hacer esto:

enter image description here

La demostración se basa en la idea que se describe aquí y en el hecho de que la opción de data internos guarda los datos de entrada en forma no modificada . Por lo tanto, no es necesario crear algunas columnas ocultas para guardar información adicional asociada a la fila. Vea la respuesta y esta para obtener más detalles. Recomiendo estrictamente utilizar la opción idPrefix en subgrids. Ver la respuesta para más detalles.

A continuación, en el código que utilicé en la demostración :

 var myData = { _id: "509403957ae7d3929edcb812", name: "MYBOOK", layout: { chapters: [ { name: "myfirstchapter", sequence: 1, title: "My First Chapter", files: [ { filetype: "tex", name: "myfirstfile" }, { filetype: "tmpl", name: "myfileb" } ] }, { name: "mysecondchapter", sequence: 2, title: "My Second Chapter", files: [ { filetype: "tex", name: "myintro" }, { filetype: "tex", name: "myfilec" } ] } ] } }, $grid = $("#list"); $grid.jqGrid({ datatype: "local", data: myData.layout.chapters, colNames: ["Sequence", "Name", "Title"], colModel: [ {name: "sequence", width: 65, key: true }, {name: "name", width: 150 }, {name: "title", width: 150} ], rowNum: 10, rowList: [5, 10, 20], pager: "#pager", gridview: true, ignoreCase: true, rownumbers: true, sortname: "sequence", viewrecords: true, height: "100%", subGrid: true, subGridRowExpanded: function (subgridId, rowid) { var subgridTableId = subgridId + "_t"; $("#" + subgridId).html("
"); $("#" + subgridTableId).jqGrid({ datatype: "local", data: $(this).jqGrid("getLocalRow", rowid).files, colNames: ["Name", "Filetype"], colModel: [ {name: "name", width: 130, key: true}, {name: "filetype", width: 130} ], height: "100%", rowNum: 10, sortname: "name", idPrefix: "s_" + rowid + "_" }); } }); $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

En el código anterior, corregí algunos errores de syntax de los datos que publicaste.