jqGrid 树网格版本 4.5.2 无法使树正常工作

Question

我正在使用 jqGrid 4.5.2 和 jquery 2.2.2。因为它仍然像正常一样显示网格但没有树。在浏览器调试器中挖掘，我发现它正在设置 left:NaNpx; 的样式。我不确定为什么要设置 NaN。如果我手动将其更改为 15px，则会出现箭头，但行不在其下方，单击箭头时也不会隐藏子行。

我的代码：

<table id="TabAdminAgentsGrid" class="scroll" cellpadding="0" cellspacing="0"></table>

var grid = jQuery("#TabAdminAgentsGrid");
grid.jqGrid({
    url: '/Admin/AgentsGrid',
    altRows: true,
    altclass: 'myAltRowClass',
    autowidth: true,
    datatype: 'json',
    mtype: 'POST',
    colNames: ['Agency', 'Name', 'Status', 'City', 'State', 'Contact'],
    colModel: [
        { name: 'AgencyCode', index: 'AgencyCode', width: 18, align: 'left', sortable: true, resizable: true, sorttype: 'text', autoFit: true, stype: 'text' },
        { name: 'AgencyName', index: 'AgencyName', width: 40, align: 'left', sortable: true, resizable: true, classes: 'defaultpointer', sorttype: 'text', autoFit: true, stype: 'text' },
        { name: 'StatusCode', index: 'StatusCode', width: 10, align: 'left', sortable: true, resizable: true, classes: 'defaultpointer', formatter: function (cellvalue, options, rowObject) { if (cellvalue === 'S') { return '<span style="background-color: #e2e0e0; width: 100%;">Suspended</span>'; } else if (cellvalue === 'I') { return '<span style="background-color: #e2e0e0; width: 100%;">Inactive</span>'; } else return 'Active'; } },
        { name: 'City', index: 'City', width: 30, align: 'left', sortable: true, resizable: true, classes: 'defaultpointer' },
        { name: 'State', index: 'State', width: 8, align: 'left', resizable: true, classes: 'defaultpointer' },
        { name: 'ContactName', index: 'ContactName', width: 30, align: 'left', resizable: true, classes: 'defaultpointer' }],
    height: '400px',
    width: '800px',
    treeGrid: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'AgencyCode',
    cmTemplate: { width: 70 },
    rowNum: 15,
    rowList: [15, 20, 50],
    sortname: "AgencyCode",
    sortorder: "desc",
    viewrecords: true,
    caption: '',
    pager: "#TabAdminAgentsGridPager",
    postData: { searchParam: $("#AdminSearch").val() },

    emptyrecords: "No quotes have been submitted",
    onSelectRow: function (ids) {
        if (ids != null) {
            var data = $("#TabAdminAgentsGrid").getRowData(ids);
            GetAgency(data.AgencyCode);
        }
    },
    loadComplete: function () { $("#TabAdminAgentsGrid").setGridWidth($('#subTabs').width() - 30, true); }

}).navGrid($('#TabAdminAgentsGridPager'), { edit: false, add: false, del: false, search: false });

我的数据，我为单元格和树信息创建了一个 class，为单元格字段创建了一个。代理机构只会比他们低一级：

public class JSONAgent
    {
        public string AgencyCode { get; set; }
        public JSONAgentCell cell { get; set; }
        public string level { get; set; }
        public string parent { get; set; }
        public bool isLeaf { get; set; }
        public bool expanded { get; set; }
        public bool loaded { get; set; }
    }

    public class JSONAgentCell
    {
        public string AgencyCode { get; set; }
        public string AgencyName { get; set; }
        public string StatusCode { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string ContactName { get; set; }
    }

List<JSONAgent> agents = new List<JSONAgent>();

        foreach(var agent in agencyRecords)
        {
            JSONAgent ag = new JSONAgent();
            ag.i = agent.AgencyCode;
            ag.cell = new JSONAgentCell();
            ag.cell.AgencyCode = agent.AgencyCode;
            ag.cell.AgencyName = agent.AgencyName;
            ag.cell.StatusCode = agent.StatusCode;
            ag.cell.City = agent.City;
            ag.cell.State = agent.State;
            ag.cell.ContactName = agent.ContactName;

            if(string.IsNullOrWhiteSpace(agent.ParentAgencyCode) || agent.ParentAgencyCode == agent.AgencyCode)
            {
                ag.level = "0";
                ag.parent = null;
                ag.isLeaf = false;
                ag.expanded = false;
                ag.loaded = true;
            }
            else
            {
                ag.level = "1";
                ag.parent = agent.ParentAgencyCode;
                ag.isLeaf = true;
                ag.expanded = false;
                ag.loaded = true;
            }
            agents.Add(ag);
        }

        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalrecords,
            rows = agents.ToArray()
        };


        return Json(jsonData);

非常感谢能为我指明正确方向的任何帮助。几天来，我一直在用头撞墙。谢谢你。

编辑：这是传递到网格的 json 的样子（稍微虚拟化了数据）：

{
"total": 1,
"page": 1,
"records": 4595,
"rows": [
    {
        "AgencyCode": "077112",
        "cell": {
            "AgencyCode": "077112",
            "AgencyName": "Person McPerson",
            "StatusCode": "A",
            "City": "Stockton",
            "State": "CA",
            "ContactName": "Person McPerson"
        },
        "level": "0",
        "parent": null,
        "isLeaf": false,
        "expanded": false,
        "loaded": true
    },
    {
        "AgencyCode": "077112-1",
        "cell": {
            "AgencyCode": "077112-1",
            "AgencyName": "Anon Plus Insurance",
            "StatusCode": "A",
            "City": "Stockton",
            "State": "CA",
            "ContactName": "Person McPerson"
        },
        "level": "1",
        "parent": "077112",
        "isLeaf": true,
        "expanded": false,
        "loaded": true
    }
    ]
}

Answer 1

要解决此问题，您需要配置 jsonReader。您回复中的单元格属性是 jsonReader 中的保留字。 cell 在 repeatitems 为真时使用，但在您的情况下您不需要 repeatitems。由于网格尝试自动检测重复项，它会找到 cell 属性，但 cell 不是数组 - 它是对象。您需要将 jsonReader 中的 repeatitems 显式设置为 false。

有很多解决方案（我在4.5.2版本测试过，都有效）

1.in 网格选项

grid.jqGrid({
    ...
    jsonReader : {
        repeatitems : false
    },
    ...
});

2.In response 而不是属性 cell 写一些其他的词，比如 cells

一些注意事项：为了一切正确，您需要在 jsonReader 中设置唯一 ID，或者在 colModel 中设置为 key: true 属性。在 colModel 中设置 jsonmap 也是一个好主意。

文档中描述了所有这些属性。

jqGrid 树网格版本 4.5.2 无法使树正常工作

jqGrid tree grid version 4.5.2 having trouble getting the tree to work

c#

jquery

jqgrid

mvcjqgrid