jqgrid 树表格

直接上代码

<table id="treeGrid"></table>

引入(这里采用的是bootstrap的样式)：

bootstrap.min.css
ui.jqgrid-bootstrap4.css
jquery.min.js
grid.locale-cn.js
jquery.jqGrid.min.js

				$("#deptTable").jqGrid({
                    url: '/sys/dept/demo',
                    datatype: 'json',
                    colNames: ['id', '节点名称', '结束日期', '节点层级', '备注'],
                    colModel: [
                        {name: 'id', index: 'id', hidden: false, key: true},
                        {name: 'name', index: 'name', width: 200, sortable: false},
                        {name: 'endDate', index: 'endDate', width: 70, sortable: false},
                        {name: 'nodeLevel', index: 'nodeLevel', width: 100, sortable: false},
                        {name: 'remark', index: 'remark', width: 80, sortable: false}
                    ],
                    treeGrid: true,
                    treeGridModel: 'adjacency',
                    ExpandColumn: 'name',
                    jsonReader: {
                        root: "page",
                    },
                    treeReader: {
                        level_field: "level",
                        parent_id_field: "parent",
                        leaf_field: "leaf",
                        expanded_field: "expanded"
                    },
                });

关键配置有：treeGrid、treeGridModel、ExpandColumn、treeReader

返回的json示例：

{
"code": 0,
"page": [
{
"id": 0,
"parent": null,
"name": "张三",
"level": 0,
"endDate": "2019-04-13 11:17:18",
"nodeLevel": 20,
"expanded": false,
"remark": "123",
"leaf": false
},
{
"id": 1,
"parent": 0,
"name": "李四",
"level": 1,
"endDate": "2019-04-13 11:17:18",
"nodeLevel": 21,
"expanded": false,
"remark": "456",
"leaf": false
},
{
"id": 2,
"parent": 1,
"name": "王五",
"level": 2,
"endDate": "2019-04-13 11:17:18",
"nodeLevel": 22,
"expanded": false,
"remark": "789",
"leaf": true
}
],
"message": "success"
}

最后效果如下：