我正在尝试实现3级嵌套网格，数据绑定到数组看起来很好。子网格返回NULL数据。这是代码
var 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("");
};
var isHasSubrids = function (data) {
if (data == null) { return false; }
else
{
var l = data.length, i;
for (i = 0; i < l; i++) {
if (data[i].subgrid !== null) {
return true;
}
}
}
};
$gridName.jqGrid({
datatype: 'local',
data: records,
colNames: ['ContractId', 'Description', 'Status', 'Classification', 'Start Date', 'End Date', 'Cancel Date'], // #PF - add opp id column later
colModel: [
{ name: 'contractid', width: 100, fixed: true },
// #PFG - 3/17/2014 - LATER { name: 'opportunity', index: 'opportunity', width: 100, fixed: true },
{ name: 'description', width: 200, fixed: true },
{ name: 'status', autowidth: true, align: 'center' },
{ name: 'classification', align: 'center' },
{ name: 'startdate', align: 'center' },
{ name: 'enddate', align: 'center' },
{ name: 'canceldate', align: 'center' }
],
gridview: true,
idPrefix: "m",
rownumbers: true,
autoencode: true,
viewrecords: true,
sortname: 'contractid',
sortorder: 'desc',
height: '100%',
subGrid: isHasSubrids(records),
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: ['ContractLineId', 'Item Name', 'Start Date', 'End Date', 'Cancel Date', 'Description', 'Vendor Name', 'IsShipped'],
colModel: [
{ name: "contractlineid", width: 130, key: true, fixed: true },
{ name: "itemname", fixed: true, align: 'center' },
{ name: "startdate", fixed: true, align: 'center' },
{ name: "enddate", fixed: true, align: 'center' },
{ name: "canceldate", fixed: true, align: 'center' },
{ name: "description", width: 330, fixed: true, align: 'center' },
{ name: "vendorname", fixed: true, align: 'center' },
{ name: "isshipped", fixed: true, align: 'center' }
],
gridview: true,
idPrefix: "s" + rowId1 + "_",
rowNum: 300,
rownumbers: true,
autoencode: true,
sortname: 'contractlineid',
sortorder: "desc",
height: "100%",
//loadComplete: removeSubgridIcon,
subGrid: isHasSubrids(localRowData1.subgrid),
subGridOptions: {
"plusicon": "ui-icon-triangle-1-e",
"minusicon": "ui-icon-triangle-1-s",
"openicon": "ui-icon-arrowreturn-1-e",
// load the subgrid data only once
// and the just show/hide
"reloadOnExpand": false,
// select the row when the expand column is clicked
"selectOnExpand": true
},
subGridRowExpanded: function (subgridDivId2, rowId2) {
// Sub grid2 holding product details
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: ['ProductId', 'Name', 'Description'],
colModel: [
{ name: "productid", key: true, fixed: true, align: 'center' },
{ name: "name", fixed: true, align: 'center' },
{ name: "description", width: 500, fixed: true, align: 'center' }
],
gridview: true,
autowidth: true,
idPrefix: "s" + rowId1 + "_" + rowId2 + "_",
rownumbers: true,
autoencode: true,
sortname: 'productid',
sortorder: "desc",
height: '100%',
subGrid: isHasSubrids(localRowData2.subgrid),
subGridOptions: {
"plusicon": "ui-icon-triangle-1-e",
"minusicon": "ui-icon-triangle-1-s",
"openicon": "ui-icon-arrowreturn-1-e",
// load the subgrid data only once
// and the just show/hide
"reloadOnExpand": false,
// select the row when the expand column is clicked
"selectOnExpand": true
}
//loadComplete: removeSubgridIcon
});
}
});
}
});
//============================================================
// set grid width
//============================================================
$gridName.setGridWidth($('#account-page').width() - 15, true);
} else {
$('#account-contract-content').html('No records exists.');
}
数据：记录具有整个树结构
localRowData1 = $（this）.jqGrid（“getLocalRow”，rowId1）;
localRowData1没有获取任何子网格行 subGrid：isHasSubrids（localRowData1.subgrid）这里localRowData1.subgrid返回NULL
这就是我的数据：
-0:Object
|
| -0:Object
| |
| | -0:Object
| | |
| | |
| | Description:
| | Name:
| | Prouductid:
| |
| | 1:Object
| |
| | 2:Object
| |
| | 3:Object
| |
| |
| |
| canceldate:
| contractlineid:
| Description:
| EndDate:
| Isshipped:
|
| +1:Object
|
| +2:Object
|
| +3:Object
|
|
|
|
canceldate:
classification:
contractid:
description:
enddate:
startdate:
status:
+1:Object
+2:Object
+3:Object
答案 0 :(得分：0)
使用addRowData向网格填充数据是非常糟糕的选择。这不仅是最慢的方式。您使用addRowData多次i + 1作为rowid。如果您这样做，则key中定义的colModel属性将被忽略。而不是使用值1,2,3 ...。如果使用subgids你会有很多id重复，这是邪恶的。
我严格建议您使用data参数填充网格。在jqGrid根据sortname和sortorder参数的值自动对数据进行排序的情况下。它也会自动进行数据分页。填充网格后无需额外调用.trigger('reloadGrid')。
即使您使用对应于数据本机表示的正确id值，您仍可以在不同子网格中或主网格与某些子网格之间具有id重复项。因此，严格建议为每个网格和每个子网格使用唯一的idPrefix 。有关详细信息，请参阅the answer或this one。
更新：我将您的jsfiddle演示修改为以下工作代码：http://jsfiddle.net/OlegKi/1ggvpukb/5/