jqGrid Treegrid не отображает как treegrid
У меня проблема с получением моего jqgrid для отображения данных в формате древовидной сетки.
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
}]
Я просмотрел несколько примеров, найденных в Интернете, в том числе некоторые из них на Stackru, ссылающихся на некоторые из них на Fiddler, и я не могу понять, что я делаю неправильно. Я хотел бы, чтобы данные отображались в виде дерева, но вместо этого данные отображаются в стандартном формате сетки (см. Прилагаемый снимок экрана). (Я знаю, что нужно немного стилизовать, но я сделаю это, как только смогу решить проблему с сеткой деревьев!!!)
Снимок экрана: вид дерева jqGrid с неправильной компоновкой
Я был бы благодарен, если бы кто-то мог взглянуть и показать мне ошибку моих путей.
Спасибо @ Олег...
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' />");
}
}
});
@ Олег... Пакет Nuget, который я использую (d), вот этот...
1 ответ
Вы используете значения из SiteID колонка в parent, но вы не информируете об этом jqGrid. Более того, неясно, как вы заполняете сетку данными.
datatype: "jsonstring",
datastr: mydata,
jsonReader: { id: "SiteID" }
где mydata это входные данные, которые вы разместили. Посмотрите на https://jsfiddle.net/rfwvovub/2/, который исправляет сетку. Я использовал бесплатный jqGrid в демоверсии, но то же самое, я думаю, должно работать и со старыми версиями jqGrid.