【表格树状】jqgrid表格树状折叠效果实现（附代码，留邮箱发demo）

写在前面

有段时间没好好的整理一篇前端文章了，之前的6月城市活动也结束了，期待下周的榜单公布，其实这个月还有一个东西也让我牵肠挂肚的，就是软考的成绩也会在这个月的中旬公布，也是感觉很悬。既成定局，那就往前看吧。
不知不觉说了一堆废话哈，那么今天重点的和大家说一下表格的父子结构，折叠与隐藏效果，那么这篇文章就重点和大家介绍一下如何实现表格树状折叠效果，别的不多说，先看动态图效果吧。

涉及知识

表格如何实现父子结构折叠效果，jqgrid表格，jqgrid树状表格展示与实现，表格树状结构的实现，jqgrid的表格树结构实现（本地数据与文本访问）

先睹为快

首先基础表格的搭建我就不做过多的陈述了，我之前写过jqgrid的一些文章，里面就包含了demo。
原创于：CSDN博主-《拄杖盲学轻声码》，更多内容可去其主页关注下哈，不胜感激

---

---

一、属性的设置

因为是基于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年一起加油！！！