jqGrid Treegrid 没有呈现为 treegrid

Question

我在让我的 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)}

            });

列 headers 通过调用 MVC 操作方法定义，returns 以下 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
        }
    }]

数据的初始加载 returns 以下（再次来自 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 上找到的一些示例，包括 Whosebug 上的一些链接到 Fiddler 上的一些示例，但我终究无法弄清楚我做错了什么。我希望数据显示为一棵树，但数据似乎以标准网格格式显示（请参阅随附的屏幕截图）。（我知道它需要一些样式，但一旦我能解决我的树网格问题我就会这样做！！！）

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)就是这个...

Image of installed jqGrid nuget package

Answer 1

您在 parent 中使用了 SiteID 列的值，但您没有通知 jqGrid。此外，不清楚如何用数据填充网格。

datatype: "jsonstring",
datastr: mydata,
jsonReader: { id: "SiteID" }

其中 mydata 是您发布的输入数据。查看演示中的 https://jsfiddle.net/rfwvovub/2/, which fixes the grid. I used free jqGrid，但我认为同样适用于旧版本的 jqGrid。

jqGrid Treegrid 没有呈现为 treegrid

jqGrid Treegrid is not rendering as a treegrid

model-view-controller

json

jqgrid

treegrid