创建 jQgrid树形表格
官网地址：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid
案例地址：https://blog.mn886.net/jqGrid/
1、编写html页面引入相应插件文件
jQgrid基于jQuery库，首先要引入jQuery.js；表格样式使用了boostrap，引入了boostrap.min.css；引入ui.jqgrid.css、jquery.jqGrid.min.js、grid.locale-cn.js
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="shortcut icon" href="favicon.ico" target="_blank" rel="external nofollow" >
<link href="../../css/bootstrap.min.css?v=3.3.6" target="_blank" rel="external nofollow" rel="stylesheet">
<link href="../../css/plugins/jqgrid/ui.jqgrid.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<link href="../../css/font-awesome.min.css?v=4.4.0" target="_blank" rel="external nofollow" rel="stylesheet">
</head>
<body>
<table id="treeTable"></table>
</body>
<script src="../../js/jquery.min.js?v=2.1.4"></script>
<script src="../../js/bootstrap.min.js?v=3.3.6"></script>
<script src="../../js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="../../js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
</html>
2、jQgrid初始配置
$('#treeTable').jqGrid({
url: '../../data/department.json', // 本地json数据
styleUI:'Bootstrap', // 使用Boostrap样式
datatype: 'json',
treeGrid: true, // 启用treeGrid树形表格
treeGridModel: 'adjacency', // treeGrid所使用的数据结构方法,nested:嵌套集模型，adjacency: 邻接模型
ExpandColumn: 'name', // 指定那列来展开tree grid，默认为第一列
colNames: ['部门名称','联系电话','部门地址','启用','部门描述'],
colModel: [
{ name:"name", index:"name", align: "left", width: 300, sortable: false },
{ name:"tel", index:"tel", align: "left", width: 160, sortable: false },
{ name:"address", index:"address", align: "left", width: 400, sortable: false },
{ name:"status", index:"status", align: "left", width: 140, sortable: false, formatter:'checkbox', editoptions:{value:'1:0'}, formatoptions:{disabled:false} },
{ name:"description", index:"description", align: "left", width: 600, sortable: false }
],
autowidth: true,
jsonReader: {
rows: 'rows',
repeatitems: false
},
treeReader: { // 扩展表格的colModel
level_field: "level", // treeGrid等级字段，从0开始
parent_id_field: "parent", // treeGrid父级id字段
leaf_field: "isLeaf", // 是否叶子节点字段
expanded_field: "expanded" //treeGrid是否展开字段
}
});
注意：
下面是实现treeGrid树形结构所需的基本配置
treeGrid: true, // 启用treeGrid树形表格
treeGridModel: 'adjacency', // treeGrid所使用的数据结构方法,nested:嵌套集模型，adjacency: 邻接模型
ExpandColumn: 'name', // 指定那列来展开tree grid，默认为第一列
treeReader: { // 扩展表格的colModel
level_field: "level", // treeGrid等级字段，integer类型，从0开始
parent_id_field: "parent", // treeGrid关联父级id字段
leaf_field: "isLeaf", // 是否叶子节点字段，boolean类型
expanded_field: "expanded" //treeGrid是否展开字段 ，boolean类型
}
3、本地静态json数据(adjacency：邻接数据结构)
{
"rows": [
{
"id": 0,
"status": 1,
"name":"张三",
"tel":"13011112222",
"address": "辽宁省本溪市广裕路6号",
"status": 1,
"description": "货物仓储、运输、装卸、集装箱、接取送达、煤炭抑尘、特种设备运输等业务。",
"level": 0,
"parent": null, // level为0时,即第一级结构，parent为null值
"isLeaf": false,
"expanded": true
},
{
"id": 1,
"name":"张三",
"tel":"13011112222",
"address": "辽宁省本溪市广裕路6号",
"status": 0,
"description": "货物仓储、运输、装卸、集装箱、接取送达、煤炭抑尘、特种设备运输等业务。",
"parent": 0,
"level": 1,
"isLeaf": true,
"expanded": false
},
{
"id": 2,
"name":"张三",
"tel":"13011112222",
"address": "辽宁省本溪市广裕路6号",
"status": 0,
"description": "货物仓储、运输、装卸、集装箱、接取送达、煤炭抑尘、特种设备运输等业务。",
"level": 0,
"parent": null,
"isLeaf": true,
"expanded": false
}
]
}
4、页面展示
5、注意
1、使用treeGrid树形结构时，不支持分页、不支持多选，有兴趣的可以修改源码调试
treeGrid源码设置
setTreeGrid : function() {
//省略...
$t.p.subGrid = false;$t.p.altRows =false;
$t.p.pgbuttons = false;$t.p.pginput = false;
$t.p.gridview = true;
if($t.p.rowTotal === null ) { $t.p.rowNum = 10000; }
$t.p.multiselect = false;$t.p.rowList = [];
//省略...
}
2、本例修改了treeGrid的树形图标
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)