我的问题是让我的jqgrid以treegrid格式显示数据。
jqGrid的定义如下：
$("#grid").jqGrid({
dataType: 'local',
colNames: columnHeaders,
colModel: columnModel,
gridview: true,
treeGrid: true,
treedatatype: 'local',
loadonce: true,
treeGridModel: 'adjacency',
ExpandColumn: 'DFECode',
ExpandColClick: true,
height: 'auto',
caption: 'Multi Site Support',
autowidth: true,
shrinktofit: true,
multiselect: false,
sortable: false,
ignorecase: true,
rowNum: 20,
scroll: true,
loadComplete: function () { gridLoadComplete(); },
onSelectRow: function (id) { gridOnSelectRow(id); },
jsonReader: { repeatitems: false },
onCellSelect: function(rowId, colId, cellContent, evt) {gridOnCellSelect(rowId, colId, cellContent, evt)}
});
通过调用MVC操作方法定义列标题，该方法返回以下Json：
[ "SiteID", "DFECode", "Site Name", "Role1_ID", "Admin", "Role2_ID", "Support", "Action" ]
jqGrid模型定义如下（再次从MVC控制器动作生成）：
[{
"name": "SiteID",
"index": "SiteId",
"width": "0",
"hidden": true,
"sortable": false
},
{
"name": "DFECode",
"index": "DFECode",
"width": "120",
"hidden": false,
"sortable": false
},
{
"name": "SiteName",
"index": "SiteName",
"width": "200",
"hidden": false,
"sortable": false
},
{
"name": "Role1_ID",
"index": "Role1_ID",
"width": "0",
"hidden": true,
"sortable": false
},
{
"name": "Role1_Value",
"index": "Role1_Value",
"width": "90",
"hidden": false,
"sortable": false,
"formatter": "checkbox",
"align": "center",
"editable": true,
"edittype": "checkbox",
"formatoptions": {
"disabled": false
}
},
{
"name": "Role2_ID",
"index": "Role2_ID",
"width": "0",
"hidden": true,
"sortable": false
},
{
"name": "Role2_Value",
"index": "Role2_Value",
"width": "90",
"hidden": false,
"sortable": false,
"formatter": "checkbox",
"align": "center",
"editable": true,
"edittype": "checkbox",
"formatoptions": {
"disabled": false
}
},
{
"name": "Action",
"index": "Action",
"width": "90",
"hidden": false,
"sortable": false,
"formatter": "updateButtonFormatter",
"editable": false,
"formatoptions": {
"disabled": false
}
}]
数据的初始加载返回以下内容（再次来自MVC控制器操作：
[{
"SiteID": "25966",
"DFECode": "205",
"SiteName": "Hammersmith and Fulham",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_25966' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "0",
"parent": "",
"isLeaf": false,
"expanded": false,
"loaded": true
},
{
"SiteID": "224",
"DFECode": "205-1034",
"SiteName": "Randolph Beresford Early Years Centre(Hammersmith and Fulham)",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_224' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "1",
"parent": "25966",
"isLeaf": true,
"expanded": false,
"loaded": true
},
{
"SiteID": "225",
"DFECode": "205-1039",
"SiteName": "Vanessa Nursery School(Hammersmith and Fulham)",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_225' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "1",
"parent": "25966",
"isLeaf": true,
"expanded": false,
"loaded": true
},
{
"SiteID": "226",
"DFECode": "205-1056",
"SiteName": "James Lee Nursery School(Hammersmith and Fulham)",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_226' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "1",
"parent": "25966",
"isLeaf": true,
"expanded": false,
"loaded": true
},
{
"SiteID": "227",
"DFECode": "205-1059",
"SiteName": "Bayonne Nursery School(Hammersmith and Fulham)",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_227' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "1",
"parent": "25966",
"isLeaf": true,
"expanded": false,
"loaded": true
}]
我已经看过互联网上发现的几个例子，其中包括一些关于Fiddler链接的StackOverflow，我无法解决我的生活中我做错了什么。我希望数据显示为树，但数据似乎以标准网格格式显示（请参阅随附的屏幕截图）。 （我知道它需要一些样式，但一旦我可以解决我的treegrid问题，我会这样做！）
Screen shot of jqGrid Tree view with incorrect layout
如果有人可以看一看我的错误，我会感激不尽。
谢谢@Oleg ......
我使用的jqGrid是nuget中最新的...
我使用以下方法获取数据并按如下方式填充jqGrid ...
var treeData;
$.getJSON("/UserMgmt/Home/GetTreeData", { userId: userId }).done(function (rawData) {
if (rawData !== undefined && rawData !== null) {
treeData = $.parseJSON(rawData);
var grid = $("#grid");
grid[0].addJSONData({
total: treeData.length,
page: 1,
records: treeData.length,
rows: treeData
});
// Set the correct rowId for retrieving the updated row data.
var rowIds = grid.getDataIDs();
for (var i = 0; i < rowIds.length; i++) {
var rowId = rowIds[i];
grid.setCell(rowId, "Action", "<input type='button' value='Update' id='action_" + rowId + "' class='btn btn-info select-tag btn-sm' />");
}
}
});
@Oleg ...我使用的nuget包（d）就是这个......
答案 0 :(得分：0)
您使用SiteID中parent列中的值，但是您没有告知jqGrid。此外，还不清楚如何用数据填充网格。
datatype: "jsonstring",
datastr: mydata,
jsonReader: { id: "SiteID" }
其中mydata是您发布的输入数据。查看修复网格的https://jsfiddle.net/rfwvovub/2/。我在演示中使用了free jqGrid，但我认为同样适用于旧版本的jqGrid。