用于父子关系的JQuery Grid-SubGrid

我需要一些想法，关于如何在下面的sceaniro中实现一个子网格。

以下是我想在JQuery Grid和Subgrid中显示的json数据。 基本上我得到一个叫做“Contact”的对象，它有一个名为“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" } ] } ...] } 

我想eache网格行显示“联系人”和与网格相关联的子网应显示“actionSet”集合。

当网格中的特定行被选中时，我不想进行服务器调用来获取关联的动作，因为它们已经存在于“动作集”中。

我已经得到了Grid的工作，很好地显示了“Contacts”，但是在实现子网格的时候，我感到困惑，因为如何获取它的数据，就像它已经在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() { }, 

这是可以实现的吗？ 我是否需要专门为子网格parsingJSON数据？ 这怎么能实现？

Answer 1

我build议你将actionSet中的信息保存在一个对象中，以后可以轻松访问。 例如，您可以使用userData参数并在beforeProcessing内部填充JSON数据的userdata部分。 创build子网格，你可以按照答案或另一个 。

演示演示了实现方法：

它使用下面的代码

 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 = $("<table id='" + subgridDivId + "_t'></table>"), 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 + "_" }); } }); 

更新 ：演示中使用的JSON数据可以在下面看到。 我添加了jqGrid所需的id属性。 我用actionID作为子actionID的id ：

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