开源软件名称：

layui-tableTree

开源软件地址：

https://gitee.com/dqb12315/layui-table-tree

开源软件介绍：

layui-tableTreeDj

先来个图片

效果图

介绍

使表格增加了树形结构展示的能力.完全依赖于layui的表格.正因为如此,您可以像使用表格组件一样使用该组件.layui的表格功能全都有.全都有.全都有.

全量版

注意:

本组件仅支持url方式获取数据.见谅.可以将数据放入另一个json文件.然后用url方式引入(url:'./data.json')
仓库有个ie分支.没有使用es6的语法.兼容ie浏览器.
需要一次性查询出全部数据.至少上下级必须完整

组件引入方法请阅读官方文档

https://www.layui.com/doc/base/modules.html#extend

方法

render(): 表格渲染.一般第一次显示调用.或者其他操作比如删除/添加等操作后也可以调用.第二次调用可以不传参数.如果传递参数会将上次参数覆盖.
reload(): 表格重载,内部调用了table.reload().一般用于搜索后显示数据.提交where条件给后端.
getTable(): 由于该组件内部使用了layui.table.如果想更细粒度的操作table.可以使用此方法获取table对象
其他方法: 请阅读源码,只要方法名不以下划线开头都可以使用.如果需要的话.

参数

参数名称	必填	默认值	含义
keyId	否	id	数据主键
keyPid	否	pid	父级ID字段名称
title	否	name	用于点击触发展开折叠的字段
indent	否	`   `	缩进字符
icon.open	否	layui-icon layui-icon-triangle-d	展开时候的图标
icon.close	否	layui-icon layui-icon-triangle-r	折叠时候的图标
showCache	否	false	折叠状态是否缓存,可传字符串.表示缓存的key.缓存记录的位置为 `localStorage`
sort	否	asc	排序方式,只支持小写
defaultShow	否	false	是否默认全部展开,优先级低于 `showCache` 字段

代码示例

layui.use(['tableTreeDj'], function() {        const tableTree = layui.tableTreeDj;        const $ = layui.$;        // 与 layui.table 的参数完全一致,内部本来就是把这些参数传递给table模块的        const objTable = {            elem: '#test'            ,url: "./getData"            ,cols: [[                {field:'name', title:'名称' },                {field:'id', title:'ID' },                {field:'pid', title:'上级ID' },                {field:'level', title:'层级' },                {field:'agent_id', title:'代理ID' },            ]]            ,id:'list'        }        // 本组件用到的参数, 组件内部有默认值,与此一致,因此您可以只声明不一致的配置项        const config = {            keyId: "id" // 当前ID            , keyPid: "pid" // 上级ID            , title: "name" // 标题名称字段,此字段td用于绑定单击折叠展开功能            , indent: ' &nbsp; &nbsp;' // 子级td的缩进.可以是其他字符            // 图标            , icon: {                open: 'layui-icon layui-icon-triangle-d', // 展开时候图标                close: 'layui-icon layui-icon-triangle-r', // 折叠时候图标            }            , showCache: true //是否开启展开折叠缓存,默认不开启.        };        // 渲染         tableTree.render(objTable, config);        // 其他一系列操作后.重新渲染表格,此时可以不传递参数.内部记录了上次传入的参数.        tableTree.render();                // 点击搜索按钮后重载数据.此时可以传入where条件.obj参数与官方表格一致.        obj = {where:{id: 1}};        tableTree.reload(obj);    });

懒加载版

注意

只支持 自动渲染方式.
支持懒加载.在点击展开时候通过ajax获取数据.折叠时候.为了保证浏览器速度,删除折叠的数据.

配置参数

参数名称	必填	默认值	含义
tabkeKey	否	demo	表格 `lay-filter` 属性
fieldId	否	id	ID字段的名称
fieldClick	否	username	用于点击触发展开折叠的名称
reqUrl	是		请求的url地址,其他参数可拼接到url中
reqKey	否	pid	请求的key
reqVal	否	0	请求的值
indent	否	`     `	缩进
icon.open	否	layui-icon layui-icon-triangle-d	展开时候的图标
icon.close	否	layui-icon layui-icon-triangle-d	折叠时候的图标

代码示例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../../../layui/src/css/layui.css" media="all">    <script type="text/javascript" src="../../../layui/src/layui.js"></script></head><body><script type="text/html" id="toolbarDemo">    <div class="layui-btn-container">        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>    </div></script><table style="display: none" lay-filter="demo" id="demo">    <thead>    <tr>        <th lay-data="{field:'id', width:100}">ID</th>        <th lay-data="{field:'pid', width:100}">PID</th>        <th lay-data="{field:'username', width:500}">昵称</th>        <th lay-data="{field:'age', width:80, sort:true}">年龄</th>        <th lay-data="{field:'sign'}">签名</th>        <th lay-data="{toolbar: '#toolbarDemo'}">操作</th>    </tr>    </thead>    <tbody>    </tbody></table><div id="page"></div><script type="text/javascript">    layui.config({        base: '../../../layui_exts/tableTreeDj/'    });    layui.use(['table','tableTreeRemoteDj'], function() {        const table = layui.table        const tableTree = layui.tableTreeRemoteDj;        const $ = layui.$;        const tableKey = 'demo'        // 表格配置        const objTable = {            height:500            , limit: 10000        }        // 组件配置        const objTree = {            tableKey: 'demo'            ,fieldId: 'id'            ,fieldClick: 'username'            ,reqUrl: './getData.php'            ,reqKey: 'pid'            ,reqVal: 0        }        tableTree.render(objTable, objTree)    });</script></body></html>