JQuery Grid-SubGrid per relazione padre-figlio

Ho bisogno di qualche idea su come implementare una subgrid nel seguente sceaniro.

Di seguito sono riportati i dati JSON che desidero visualizzare in JQuery Grid e Subgrid. Fondamentalmente sto ricevendo un object chiamato “Contatto” che ha una collezione chiamata “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" } ] } ...] } 

Voglio eache Grid row per visualizzare il “Contatto” e il subgris associato alla griglia dovrebbe visualizzare la raccolta “actionSet”.

Quando viene selezionata una particolare riga nella griglia, non voglio effettuare una chiamata al server per ottenere le azioni associate, poiché sono già presenti in “actionSet”.

Ho ottenuto il Grid funzionante, visualizzando bene i “Contatti”, ma mi confondo mentre implemento la subgrid, come come ottenere i dati per esso, come è già disponibile in 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() { }, 

È ansible? Devo analizzare i dati JSON appositamente per la subgrid? Come può essere realizzato?

Ti suggerisco di salvare le informazioni da actionSet in un object che puoi facilmente accedere in seguito. Ad esempio, è ansible utilizzare il parametro userData e compilare la parte userdata dei dati JSON all’interno di beforeProcessing . La subgrid di creazione è ansible seguire la risposta o un’altra .

La demo dimostra l’approccio di implementazione:

inserisci la descrizione dell'immagine qui

Usa il seguente codice

 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 + "_" }); } });

AGGIORNATO : I dati JSON utilizzati nella demo si possono vedere di seguito. Ho aggiunto la proprietà id che è richiesta per jqGrid. Ho usato actionID come id dei subgrids:

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