直接上代码
<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"
}
最后效果如下: