一、前言

备注:这个大佬写得很全面，也有演示地址，不过是直接读取本地的json文本，我写这文章就是补充下后端动态的给前端传值，本人小白，第一次写，主要是为了做下笔记，有需要的朋友将就的看下。

先看下效果图：

HTML5树形封装 html制作树形列表_树形表格


备注：我是用springboot写的，所以后面的所有静态文件都是放在/static/下

二、前端部分

2.1 导入需要的包

下载地址：https://pan.baidu.com/s/16Of8jSOFSE4hzyWjouQwog

<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/static/lib/layui/css/common.css"/>
    <script type="text/javascript" src="/static/lib/layui/layui.js"></script>

备注：包地址根据自己情况修改，layui文件夹须整个复制

2.2 css修改图标

<style>
        /** 箭头未展开 */
        #table1 + .treeTable .treeTable-icon .layui-icon-triangle-d:before {
            content: "\e602";
        }
        /** 箭头展开 */
        #table1 + .treeTable .treeTable-icon.open .layui-icon-triangle-d:before {
            content: "\e61a";
        }
        /** 文件图标 */
        #table1 + .treeTable .treeTable-icon .layui-icon-file:before {
            content: "";
        }
        /** 文件夹未展开（默认有图标我改为空了） */
        #table1 + .treeTable .treeTable-icon .layui-icon-layer:before {
            content: "";
        }
        /** 文件夹展开（默认有图标我改为空了） */
        #table1 + .treeTable .treeTable-icon.open .layui-icon-layer:before {
            content: "";
        }
    </style>

2.3 引入表格

<table id="table1" class="layui-table" lay-filter="table1"></table>
<!-- 工具条（编辑和删除按钮） -->
<script type="text/html" id="oper-col">
	<button class="layui-btn layui-btn layui-btn-xs" lay-event="edit"  ><i class="layui-icon"></i>编辑</button>
	<button class="layui-btn-danger layui-btn layui-btn-xs"  lay-event="del" ><i class="layui-icon"></i>删除</button>
</script>

备注：复制需要的地方即可

2.4 将下载的module文件夹复制到你的项目中，然后在js中用模块加载的方式使用

<script>
    layui.config({
        base: '/static/module/'    /* 修改为你module文件夹地址*/
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                size: 'lg', //尺寸     
                treeColIndex: 0, //设置下拉箭头在第几列
                treeSpid: "0",   //最上级的父级id
                treeIdName: 'deptId', //id字段的名称(自己的id)
                treePidName: 'parentId', //pid字段的名称（父亲的id）
                treeDefaultClose: true, //是否默认折叠
                treeLinkage: false, //父级展开时是否自动展开所有子级
                elem: '#table1', //表格的id
                url: '/getData', //数据请求地址，返回json格式数据（映射路径）
                page: false,
                cols: [   //列数和列名可根据需要更改
                    [
                        {field: 'name', width:"40%",align:'left' , title: '名称'}, //filed:json数据的key
                        {field: 'parName', align:'center', title: '上级部门'},
                        {field: 'orderNum',align:'center' , title: '排序'},
                        {toolbar: '#oper-col',align:'center', title: '操作'} //toolbar:工具条的id
                    ]
                ],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };
        renderTable();

        //监听工具条
        table.on('tool(table1)', function(obj){ //注：tool是工具条事件名，table1是table表格的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
				
            }
        });
    });
</script>

备注：具体参数使用可参考https://www.layui.com/doc/modules/table.html#async

三、后端部分

3.1 数据表

HTML5树形封装 html制作树形列表_HTML5树形封装_02

字段名

描述

dept_id

部门id

parent_id

上级部门id（父亲id）

name

部门名

order_num

排序

备注：dept_id 、parent_id 类型必须为varchar

3.2 创建对应的部门实体类SysDept（对应属性名和get、set方法，这里就不展示了）

3.3 controller层设置映射路径，并返回json格式数据

@RestController
public class SysDeptController {
    @Resource
    SysDeptService sysDeptService;
    //映射路径
    @RequestMapping(value = "/getData")
    public Map<String, Object> Test(){
        Map<String, Object> map = new HashMap<>();

       //查询所有部门表所有记录
        List<SysDept> sysDeptList=sysDeptService.selectAll();

        map.put("data", sysDeptList);

        return map;
    }
}

备注：

  1. springboot用@RestController就行，SSM需要将@RestController改为@Controller，并在方法名上加 @ResponseBody
    2.sql语句、dao层和service层就不写了，就是简单的查询所有记录和调用，没有其他的逻辑处理

3.4 返回数据格式：

{
    "data": [
        {
            "deptId": "1",
            "parentId": "0",
            "name": "人人开源集团",
            "orderNum": 0
        },
        {
            "deptId": "5",
            "parentId": "1",
            "name": "上海分公司",
            "orderNum": 0
        },
        {
            "deptId": "12",
            "parentId": "5",
            "name": "市场部",
            "orderNum": 0
        },
        {
            "deptId": "16",
            "parentId": "6",
            "name": "技术部",
            "orderNum": 0
        },
        {
            "deptId": "6",
            "parentId": "1",
            "name": "北京分公司",
            "orderNum": 1
        },
        {
            "deptId": "13",
            "parentId": "5",
            "name": "销售部",
            "orderNum": 1
        },
        {
            "deptId": "14",
            "parentId": "6",
            "name": "财务部",
            "orderNum": 1
        }
    ]
}