jqGrid：使用本地数据类型发出加载嵌套子网格的问题
我正在尝试使用jqGrid和本地数据来嵌套子网格。我搜索了很多，但一直无法找到解决方案。以下是我的代码的简化示例：
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 }
],
});
}
});
}
});
有任何想法吗？
1 个答案:
答案 0 :(得分：8)
我觉得你的问题很有意思。我认为答案对许多其他人都有帮助。所以我写了两个演示，我演示了如何实现这些要求。
The first demo基于my previous answer的演示（基于another one），您使用的代码已在问题文本中使用过。我还添加了来自the answer的技巧，以隐藏没有子网格的行的子网格图标（＆＃34; +＆＃34;）。
为了简化子网格数据的保存，我在每行subgrid属性中添加了哪个值是子网格的数据。保存数据的方式非常实用，因为jqGrid保存了行的完整项目，因此您不需要更多隐藏列。要访问本地数据，我建议使用getLocalRow方法。有关其他信息，请参阅the answer或getLocalRow方法的the source code非常简单。
第一个演示的代码：
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
});
}
});
}
});
The second demo是对上一个演示的更深层修改。它可以用于创建真正深层的多级子网格。我在演示中使用了另外密集的idPrefix来简化使用id的工作。我建议在第一个演示和第二个演示中比较id数组项的myData属性值。第二个演示的代码在
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)
}));
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？