【发布时间】：2016-01-11 12:54:15
【问题描述】：
我无法让我的 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)}
});
通过调用返回以下 Json 的 MVC 操作方法定义的列标题：
[ "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
}]
我查看了一些在 Internet 上找到的示例，包括 StackOverflow 上的一些链接到 Fiddler 上的一些示例，但我终其一生都无法弄清楚我做错了什么。我希望将数据显示为树，但数据似乎以标准网格格式显示（请参阅随附的屏幕截图）。 （我知道它需要一些样式，但一旦我能解决我的 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）就是这个...
【问题讨论】：
-
您使用哪个版本的 jGrid（free jqGrid、Guriddo jqGrid JS 或版本 dataType 而不是
datatype并且您的代码不包含任何data或datastr参数。目前还不清楚如何用数据填充 TreeGrid。 -
干杯 Oleg ...我使用来自 nuget 的最新 jqGrid。我使用以下方法加载数据...
-
您使用什么 NuGet 包？我在nuget.org/packages/free-jqGrid 下发布了我的fork，最新版本是4.12.0。你用什么？顺便说一下，NuGet 将在未来（ASP.NET 5）仅用于 服务器端 组件。因此，您应该使用 npm 或 bower（请参阅 here）。我在所有存储库（参见 here 和 here）和两个 CDN（cdnjs.com 和 www.jsdelivr.com）上发布免费的 jqGrid，以便从 Internet 快速访问。
标签： json model-view-controller jqgrid treegrid