html+js实现树形表格

一：参考地址

https://gitee.com/im286er/treetable-lay

二：资源下载

https://download.csdn.net/download/huaweichenai/89583258

三：树形表格实例

1：前提

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

2：html

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

3：css

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

4：js

layui.config({
        base: '/bundle/treetable/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: false, //是否默认折叠
                treeLinkage: false, //父级展开时是否自动展开所有子级
                elem: '#table', //表格的id
                url: 'XXX', //数据请求地址，返回json格式数据（映射路径）
                page: false,
                cols: [   //列数和列名可根据需要更改
                    [
                        {field: 'name', width:"40%",align:'left' , title: '名称'}, //filed:json数据的key
                        {field: 'status', align:'center', title: '状态'},
                        {toolbar: '#oper-col',align:'center', title: '操作'} //toolbar:工具条的id
                    ]
                ],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };
        renderTable();

        //监听工具条
        table.on('tool(table)', function(obj){ //注：tool是工具条事件名，table是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

            }
        });
    });

5：表格数据结构

{
    "data": [
        {
            "deptId": "1",
            "parentId": "0",
            "name": "项目部",
            "status": '启用'
        },
        {
            "deptId": "1",
            "parentId": "0",
            "name": "项目部",
            "status": '启用'
        },
        {
            "deptId": "2",
            "parentId": "1",
            "name": "技术部",
            "status": '启用'
        },
        {
            "deptId": "3",
            "parentId": "1",
            "name": "产品部",
            "status": '启用'
        },
        {
            "deptId": "4",
            "parentId": "1",
            "name": "设计部",
            "status": '启用'
        },
        {
            "deptId": "5",
            "parentId": "0",
            "name": "商务部",
            "status": '启用'
        },
        {
            "deptId": "6",
            "parentId": "5",
            "name": "销售部",
            "status": '启用'
        },
        {
            "deptId": "7",
            "parentId": "5",
            "name": "售前部",
            "status": '启用'
        }
    ]
}

6：最终效果