JQuery Grid-SubGrid para relación padre-hijo

Necesito alguna idea sobre cómo implementar una subred en el siguiente sceaniro.

A continuación, se muestran los datos json que quiero mostrar en JQuery Grid y Subgrid. Básicamente recibo un objeto llamado “Contacto” que tiene una colección llamada “actionSet”.

{ "total" : "10", "page" : "1", "records" : "78", "rows" : [ { "comment" : null, "givenName" : "Contact A", "familyName" : "A", "actionSet" : [ { "actionID" : 1, "actionDueDate" : "2012-12-08", "actionNote" : "Action 1" }, { "actionID" : 2, "actionDueDate" : "2012-12-08", "actionNote" : "Action 2" } ] } ...] } 

Quiero que eache Grid row muestre el “Contacto” y que el subgris asociado con la grilla muestre la colección “actionSet”.

Cuando se selecciona una fila en particular en la Grilla, no quiero hacer una llamada al servidor para obtener las acciones asociadas, ya que están presentes en el “conjunto de acciones”.

Tengo la Grilla funcionando, mostrando los “Contactos” muy bien, pero me confundo al implementar la sub-red, como obtener los datos, ya está disponible en json.

 jq(function() { jq("#grid").jqGrid({ url:'/smallworks/project/getall.do', datatype: 'json', mtype: 'GET', colNames:['Id', 'First Name', 'Last Name'], colModel:[ {name:'id',index:'id', width:55,editable:false,editoptions: {readonly:true,size:10},hidden:true}, {name:'givenName',index:'givenName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}, {name:'familyName',index:'familyName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}} ], postData: { }, rowNum:20, rowList:[20,40,60], height: 200, autowidth: true, rownumbers: true, pager: '#pager', sortname: 'id', viewrecords: true, sortorder: "asc", caption:"Contacts", emptyrecords: "Empty records", loadonce: false, loadComplete: function() { }, 

Es esto alcanzable? ¿Debo analizar los datos de JSON especialmente para la subred? ¿Cómo se puede lograr esto?

Le sugiero que guarde información de actionSet en un objeto al que pueda acceder fácilmente más adelante. Por ejemplo, puede usar el parámetro userData y completar la parte userdata de los datos JSON dentro de beforeProcessing . La subgrid creada puede seguir la respuesta u otra .

La demostración demuestra el enfoque de implementación:

enter image description here

Utiliza el siguiente código

 var mainGridPrefix = "s_"; $("#grid").jqGrid({ url: "Adofo.json", datatype: "json", colNames: ["First Name", "Last Name"], colModel: [ { name: "givenName" }, { name: "familyName" } ], cmTemplate: {width: 100, editable: true, editrules: {required: true}, editoptions: {size: 10}}, rowNum: 20, rowList: [20, 40, 60], pager: "#pager", gridview: true, caption: "Contacts", rownumbers: true, autoencode: true, height: "100%", idPrefix: mainGridPrefix, subGrid: true, jsonReader: { repeatitems: false }, beforeProcessing: function (data) { var rows = data.rows, l = rows.length, i, item, subgrids = {}; for (i = 0; i < l; i++) { item = rows[i]; if (item.actionSet) { subgrids[item.id] = item.actionSet; } } data.userdata = subgrids; }, subGridRowExpanded: function (subgridDivId, rowId) { var $subgrid = $("
"), pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId), subgrids = $(this).jqGrid("getGridParam", "userData"); $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId)); $subgrid.jqGrid({ datatype: "local", data: subgrids[pureRowId], colNames: ["Due Date", "Note"], colModel: [ { name: "actionDueDate", formatter: "date", sorttype: "date" }, { name: "actionNote" } ], sortname: "actionDueDate", height: "100%", rowNum: 10000, autoencode: true, autowidth: true, jsonReader: { repeatitems: false, id: "actionID" }, gridview: true, idPrefix: rowId + "_" }); } });

ACTUALIZADO : Los datos JSON utilizados en la demostración se pueden ver a continuación. Agregué la propiedad id que se requiere para jqGrid. Utilicé actionID como id de las subredes:

 { "total": "10", "page": "1", "records": "78", "rows": [ { "id": 10, "comment": null, "givenName": "Contact A", "familyName": "A", "actionSet": [ { "actionID": 1, "actionDueDate": "2012-12-08", "actionNote": "Action 1" }, { "actionID": 2, "actionDueDate": "2012-12-09", "actionNote": "Action 2" } ] }, { "id": 20, "comment": null, "givenName": "Contact B", "familyName": "B", "actionSet": [ { "actionID": 3, "actionDueDate": "2012-12-11", "actionNote": "Action 3" }, { "actionID": 4, "actionDueDate": "2012-12-10", "actionNote": "Action 4" } ] } ] }