【写在前面】有段时间没好好的整理一篇前端文章了，之前的6月城市活动也结束了，期待下周的榜单公布，其实这个月还有一个东西也让我牵肠挂肚的，就是软考的成绩也会在这个月的中旬公布，也是感觉很悬。既成定局，那就往前看吧。
不知不觉说了一堆废话哈，那么今天重点的和大家说一下表格的父子结构，折叠与隐藏效果，那么这篇文章就重点和大家介绍一下如何实现表格树状折叠效果，别的不多说，先看动态图效果吧。
【涉及知识】表格如何实现父子结构折叠效果，jqgrid表格，jqgrid树状表格展示与实现，表格树状结构的实现，jqgrid的表格树结构实现（本地数据与文本访问）
【先睹为快】
首先基础表格的搭建我就不做过多的陈述了，我之前写过jqgrid的一些文章，里面就包含了demo。
一、属性的设置
因为是基于jqgrid，其实主要还是设置这些属性就可以：
| 属性 | 描述 | 值 |
|---|---|---|
| treeGrid | 是否启动树结构属性 | true：启动，false：不启动 |
| treeGridModel | treeGrid所使用的数据结构方法 | nested:嵌套集模型，adjacency: 邻接模型 |
| ExpandColumn | 指定那列来展开tree grid | 默认为第一列 |
| treeReader | 扩展表格的colModel | 其设置属性如下罗列 |
| level_field | treeGrid等级字段，从0开始 | 对应于返回级别字段key |
| parent_id_field | treeGrid父级id字段 | 对应于返回父节点字段key |
| leaf_field | 是否叶子节点字段 | 对应于返回节点字段key |
| expanded_field | treeGrid是否展开字段 | 对应于返回默认展开字段key |
有了上表格的描述，其实就很清晰了。
核心代码：
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是否展开字段
},
二、参数的准备
1、本地参数
对应jqgrid的属性设置：
data: lodata.rows,
datatype: 'local',
本地json数据
var lodata = {
"rows": [
{
"id": 0,
"status": 0,
"name": "黄大大",
"tel": "13011112555",
"address": "江苏省南京市厉害区",
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"level": 0,
"parent": null,
"isLeaf": false,
"expanded": false
},
{
"id": 1,
"name": "黄大大001",
"tel": "13011112666",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"parent": 0,
"level": 1,
"isLeaf": true,
"expanded": false
},
{
"id": 2,
"name": "黄狠人",
"tel": "13011112222",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"level": 0,
"parent": null,
"isLeaf": false,
"expanded": false
},
{
"id": 3,
"name": "黄狠人001",
"tel": "13011112221",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"parent": 2,
"level": 1,
"isLeaf": true,
"expanded": false
},
{
"id": 4,
"name": "黄狠人002",
"tel": "13011112244",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"parent": 2,
"level": 1,
"isLeaf": true,
"expanded": false
},
{
"id": 5,
"name": "黄狠人009",
"tel": "13011112246",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"parent": 2,
"level": 1,
"isLeaf": true,
"expanded": false
}
]
};
2、接口参数（json文件模拟）
对应jqgrid的属性设置：
url: './data/department.json', // 本地json数据
datatype: 'json',
本地json数据
{
"rows": [
{
"id": 0,
"status": 0,
"name": "黄大大",
"tel": "13011112555",
"address": "江苏省南京市厉害区",
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"level": 0,
"parent": null,
"isLeaf": false,
"expanded": false
},
{
"id": 5,
"name": "黄狠人009",
"tel": "13011112246",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"parent": 2,
"level": 1,
"isLeaf": true,
"expanded": false
},
{
"id": 1,
"name": "黄大大001",
"tel": "13011112666",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"parent": 0,
"level": 1,
"isLeaf": true,
"expanded": false
},
{
"id": 2,
"name": "黄狠人",
"tel": "13011112222",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"level": 0,
"parent": null,
"isLeaf": false,
"expanded": false
},
{
"id": 3,
"name": "黄狠人001",
"tel": "13011112221",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"parent": 2,
"level": 1,
"isLeaf": true,
"expanded": false
},
{
"id": 4,
"name": "黄狠人002",
"tel": "13011112244",
"address": "江苏省南京市厉害区",
"status": 0,
"description": "原创于CSDN博主-拄杖盲学轻声码，天下最帅黄大大",
"parent": 2,
"level": 1,
"isLeaf": true,
"expanded": false
}
]
}
三、页面效果
到这边就大致知道了如何去玩转树状表格了，希望大家都能取得一个不错的效果，有需要demo的可以留下邮箱哈，博主有时间看到必回哈！
涨薪支持区
期待大家能通过这篇文章学到更多，而且薪资一年更比一年猛！
喜欢博主的话可以上榜一探究竟，博主专设涨薪皇榜给大家查阅，喜欢的可以点击此处查看哟。
总结
更多前端资料大家可以关注csdn博主-《拄杖盲学轻声码》
以上就是今天要讲的内容，本文主要介绍了如何实现表格的树状结构，基于jqgrid如何实现表格折叠与收缩，也期待大家分享更多，帅哥美女们给个赞呗，2023年一起加油！！！
