jqGrid：问题与本地数据types加载嵌套的子网格

我试图让嵌套子网格使用本地数据使用jqGrid。 我search了很多，但一直没有find解决办法。 这里是我的代码的一个简单的例子：

var mainGridData = [ // main grid data { id: "m1", col1: "11", col2: "12" }, { id: "m2", col1: "21", col2: "22" }, { id: "m3", col1: "31", col2: "32" } ]; var firstSubgrid = { m1: [ // data for subgrid for the id=m1 { id: "s1a", c1: "aa", c2: "ab", c3: "ac" }, { id: "s1b", c1: "ba", c2: "bb", c3: "bc" }, { id: "s1c", c1: "ca", c2: "cb", c3: "cc" } ], m2: [ // data for subgrid for the id=m2 { id: "s2a", c1: "xx", c2: "xy", c3: "xz" } ] }; var secondSubgrid = { s1a: [ // data for subgrid for the id=m1 { id: "2s1a", d1: "2aa", d2: "2ab", d3: "2ac" }, { id: "2s1b", d1: "2ba", d2: "2bb", d3: "2bc" }, { id: "2s1c", d1: "2ca", d2: "2cb", d3: "2cc" } ], s2a: [ // data for subgrid for the id=m2 { id: "2s2a", d1: "xx", d2: "xy", d3: "xz" } ] }; //------------ $("#grid").jqGrid({ datatype: 'local', data: mainGridData, colNames: ['Column 1', 'Column 2'], colModel: [ { name: 'col1', width: 200 }, { name: 'col2', width: 200 } ], //Subgrid1... subGrid: true, subGridRowExpanded: function (subgridDivId, rowId) { var subgridTableId = subgridDivId + "_t"; $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>"); $("#" + subgridTableId).jqGrid({ datatype: 'local', data: firstSubgrid[rowId], colNames: ['Col 1', 'Col 2', 'Col 3'], colModel: [ { name: 'c1', width: 100 }, { name: 'c2', width: 100 }, { name: 'c3', width: 100 } ], //Subgrid2... subGrid: true, subGridRowExpanded: function (subgrid2DivId, subRowId2) { var subgrid2TableId = subgrid2DivId + "_t"; $("#" + subgrid2DivId).html("<table id='" + subgrid2DivId + "'></table>"); $("#" + subgrid2TableId).jqGrid({ datatype: 'local', data: secondSubgrid[subRowId2], colNames: ['Col 1', 'Col 2', 'Col 3'], colModel: [ { name: 'd1', width: 100 }, { name: 'd2', width: 100 }, { name: 'd3', width: 100 } ], }); } }); } }); 

有任何想法吗？

Answer 1

我觉得你的问题很有趣。 我认为答案可能对其他许多人有帮助。 于是我写了两个演示，演示如何实现这些需求。

第一个演示是基于我之前回答 （基于另一个 演示）中的演示，您已经在问题的文本中使用了哪些代码。 我从答案中添加了这个技巧，以隐藏没有子网格的行的子网格图标（“+”）。

为了简化子网格数据的保存，我在每一行中添加了subgrid属性，其中的值是子网格的数据。 持有数据的types是非常实用的，因为jqGrid保存行的全部项目，所以你不需要任何隐藏的列更多。 要访问本地数据，我build议使用getLocalRow方法。 有关其他信息或getLocalRow方法的源代码 ，请参阅答案 ，这非常简单。

第一个演示的代码：

 var myData = [ // main grid data { id: "m1", col1: "11", col2: "12", subgrid: [ // data for subgrid for the id=m1 { id: "s1a", c1: "aa", c2: "ab", c3: "ac", subgrid: [ // data for subgrid for the id=m1, subgridId=s1a { id: "2s1a", d1: "2aa", d2: "2ab", d3: "2ac" }, { id: "2s1b", d1: "2ba", d2: "2bb", d3: "2bc" }, { id: "2s1c", d1: "2ca", d2: "2cb", d3: "2cc" } ]}, { id: "s1b", c1: "ba", c2: "bb", c3: "bc" }, { id: "s1c", c1: "ca", c2: "cb", c3: "cc" } ]}, { id: "m2", col1: "21", col2: "22", subgrid: [ // data for subgrid for the id=m2 { id: "s2a", c1: "xx", c2: "xy", c3: "xz", subgrid: [ // data for subgrid for the id=m2, subgridId=s2a { id: "2s2a", d1: "xx", d2: "xy", d3: "xz" } ]} ]}, { id: "m3", col1: "31", col2: "32" } ], removeSubgridIcon = function () { var $this = $(this); $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function () { var rowData = $this.jqGrid("getLocalRow", $(this).closest("tr.jqgrow").attr("id")); return rowData.subgrid == null; }).unbind("click").html(""); }, isHasSubrids = function (data) { var l = data.length, i; for (i = 0; i < l; i++) { if (data[i].subgrid != null) { return true; } } return false; }; $("#list").jqGrid({ datatype: "local", data: myData, colNames: ["Column 1", "Column 2"], colModel: [ { name: "col1", width: 200 }, { name: "col2", width: 200 } ], gridview: true, rownumbers: true, autoencode: true, sortname: "col1", sortorder: "desc", height: "100%", pager: "#pager", caption: "Demonstrate how to create subgrid from local hierarchical data", subGrid: isHasSubrids(myData), loadComplete: function () { removeSubgridIcon.call(this); }, subGridRowExpanded: function (subgridDivId1, rowId1) { var $subgrid1 = $("<table id='" + subgridDivId1 + "_t'></table>"), localRowData1 = $(this).jqGrid("getLocalRow", rowId1); $subgrid1.appendTo("#" + $.jgrid.jqID(subgridDivId1)); $subgrid1.jqGrid({ datatype: "local", data: localRowData1.subgrid, colNames: ["Colunm1", "Colunm2", "Colunm3"], colModel: [ { name: "c1", width: 112 }, { name: "c2", width: 112 }, { name: "c3", width: 112 } ], gridview: true, rownumbers: true, autoencode: true, sortname: "c1", sortorder: "desc", height: "100%", loadComplete: removeSubgridIcon, subGrid: isHasSubrids(localRowData1.subgrid), subGridRowExpanded: function (subgridDivId2, rowId2) { var $subgrid2 = $("<table id='" + subgridDivId2 + "_t'></table>"), localRowData2 = $(this).jqGrid("getLocalRow", rowId2); $subgrid2.appendTo("#" + $.jgrid.jqID(subgridDivId2)); $subgrid2.jqGrid({ datatype: "local", data: localRowData2.subgrid, colNames: ["Col 1", "Col 2", "Col 3"], colModel: [ { name: "d1", width: 90 }, { name: "d2", width: 90 }, { name: "d3", width: 90 } ], gridview: true, rownumbers: true, autoencode: true, sortname: "d1", sortorder: "desc", height: "100%", subGrid: isHasSubrids(localRowData2.subgrid), loadComplete: removeSubgridIcon }); } }); } }); 

第二个演示是对前一个演示的更深入的修改。 它可以用于创build真正深度的多级子网格。 我在演示中使用了额外的密集的idPrefix来简化与ID的工作。 我build议比较第一个演示和第二个演示中myData数组项目的id属性的值。 第二个演示代码如下

 var myData = [ // main grid data { id: "1", col1: "11", col2: "12", subgrid: [ // data for subgrid for the id=m1 { id: "1", c1: "aa", c2: "ab", c3: "ac", subgrid: [ // data for subgrid for the id=m1, subgridId=s1a { id: "1", d1: "2aa", d2: "2ab", d3: "2ac" }, { id: "2", d1: "2ba", d2: "2bb", d3: "2bc" }, { id: "3", d1: "2ca", d2: "2cb", d3: "2cc" } ]}, { id: "2", c1: "ba", c2: "bb", c3: "bc" }, { id: "3", c1: "ca", c2: "cb", c3: "cc" } ]}, { id: "2", col1: "21", col2: "22", subgrid: [ // data for subgrid for the id=m2 { id: "1", c1: "1xx", c2: "1xy", c3: "1xz", subgrid: [ // data for subgrid for the id=m2, subgridId=s2a { id: "1", d1: "2xx", d2: "2xy", d3: "2xz" } ]} ]}, { id: "3", col1: "31", col2: "32" } ], removeSubgridIcon = function () { var $this = $(this), idPrefix = $this.jqGrid("getGridParam", "idPrefix"); $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function () { var rowData = $this.jqGrid("getLocalRow", $.jgrid.stripPref(idPrefix, $(this).closest("tr.jqgrow").attr("id"))); return rowData.subgrid == null; }).unbind("click").html(""); }, isHasSubrids = function (data) { var l = data.length, i; for (i = 0; i < l; i++) { if (data[i].subgrid != null) { return true; } } return false; }, specificGridOptions = [ { colNames: ["Column 1", "Column 2"], colModel: [ { name: "col1" }, { name: "col2" } ], cmTemplate: { width: 200 }, sortname: "col1", sortorder: "desc", idPrefix: "s_", pager: "#pager", caption: "Demonstrate how to create subgrid from local hierarchical data" }, { colNames: ["Colunm1", "Colunm2", "Colunm3"], colModel: [ { name: "c1" }, { name: "c2" }, { name: "c3" } ], cmTemplate: { width: 112 }, sortname: "c1", sortorder: "desc" }, { colNames: ["Col 1", "Col 2", "Col 3"], colModel: [ { name: "d1" }, { name: "d2" }, { name: "d3" } ], cmTemplate: { width: 90 }, sortname: "d1", sortorder: "desc" } ], commonGridOptions = { datatype: "local", gridview: true, rownumbers: true, autoencode: true, height: "100%", loadComplete: function () { // one can use loadComplete: removeSubgridIcon, but I included // curent implementation of loadComplete only to show how to call // removeSubgridIcon from your loadComplete callback handler removeSubgridIcon.call(this); }, subGridRowExpanded: function (subgridDivId, rowId) { var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), subgridLevel = $(this).jqGrid("getGridParam", "subgridLevel") + 1, parentIdPrefix = $(this).jqGrid("getGridParam", "idPrefix"), pureRowId = $.jgrid.stripPref(parentIdPrefix, rowId), localRowData = $(this).jqGrid("getLocalRow", pureRowId); $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId)); $subgrid.jqGrid($.extend(true, {}, commonGridOptions, specificGridOptions[subgridLevel], { data: localRowData.subgrid, subGrid: isHasSubrids(localRowData.subgrid), subgridLevel: subgridLevel, idPrefix: rowId + "_", rowNum: 10000 // we use this to have no pager in the subgrids })); } }; $("#list").jqGrid($.extend(true, {}, commonGridOptions, specificGridOptions[0], { data: myData, subgridLevel: 0, subGrid: isHasSubrids(myData) }));