JQuery Grid-SubGrid para relação pai-filho

Eu preciso de uma idéia, sobre como implementar uma sub-rede no seguinte sceaniro.

A seguir, os dados do json que desejo exibir na Grade e Sub-rede do JQuery. Basicamente eu estou recebendo um object chamado “Contact” que tem uma coleção chamada “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" } ] } ...] } 

Eu quero eache Grade de linha para exibir o “contato” e o subgris associado com a grade deve exibir “actionSet” coleção.

Quando uma determinada linha na Grade é selecionada, eu não quero fazer uma chamada do servidor para obter as ações associadas, pois elas já estão presentes no “actionSet”.

Eu tenho o Grid funcionando, exibindo os “Contatos” muito bem, mas eu fico confuso enquanto implemento o subgrid, como como obter os dados para ele, como o seu allready disponível no 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() { }, 

Isso é possível? Preciso analisar dados JSON especialmente para a sub-rede? Como isso pode ser alcançado?

Eu sugiro que você salve informações de actionSet em um object que você pode acessar facilmente mais tarde. Por exemplo, você pode usar o parâmetro userData e preencher a parte userdata dos dados JSON dentro do beforeProcessing . A sub- rede de criação pode seguir a resposta ou outra .

A demonstração demonstra a abordagem de implementação:

insira a descrição da imagem aqui

Ele usa o seguinte 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 + "_" }); } });

ATUALIZADO : Os dados JSON usados ​​na demonstração podem ser vistos abaixo. Eu adicionei a propriedade id que é necessária para o jqGrid. Eu usei o actionID como o id das sub-redes:

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