# layui-tabletree **Repository Path**: layui-extension/layui-tabletree ## Basic Information - **Project Name**: layui-tabletree - **Description**: 简单了优化了treetable-lay 1.x版本的树形表格,修复若干bug,支持原生table操作、固定列、可使用layui-soul-table组件等; 组件目前用于WaterCloud框架中,后端Net6,前端layui-mini框架,深度封装layui各种组件,开源MIT协议。 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: http://106.75.169.226:5000/ - **GVP Project**: No ## Statistics - **Stars**: 11 - **Forks**: 4 - **Created**: 2022-03-01 - **Last Updated**: 2025-01-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: layui组件 ## README # 作者寄语 - 插件基本满足树形表格使用,源码不复杂,可以给大家学习 # 演示地址 - http://106.75.169.226:5000 账号admin 密码0000 ![输入图片说明](image.png) # 组件引用方法 layui.config({ base: '../js/layui_exts/' //配置 layui 第三方扩展组件存放的基础目录 }).extend({ cardTable: 'tabletree/tabletree' }).use(['tabletree'], function(){ ## 使用文档 - 注意,如果要使用soul-table请打开源码注释,或者联系作者 ### 引入模块 下载module/treetable-lay整个文件夹,放在你的项目里面,然后使用模块加载的方式使用: ```javascript layui.config({ base: 'module/' }).extend({ treetable: 'treetable-lay/treetable' }).use(['treetable'], function () { var treetable = layui.treetable; }); ``` ### 渲染表格 ```html
``` > 注意:
>   可以使用url传递数据,也可以使用data传递数据,如果使用url传递数据,参数是where字段, > 跟layui数据表格的使用方式一致。
**数据格式**  总而言之就是以id、pid的形式,不是以subMenus的形式,当然id、pid这两个字段的名称可以自定义: ```json { "code": 0, "msg": "ok", "data": [{ "id": 1, "name": "xx", "sex": "male", "pid": -1 },{ "id": 2, "name": "xx", "sex": "male", "pid": 1 } ] } ``` ### 参数说明  layui数据表格的所有参数都可以用,除此之外treetable新增的参数有: 参数 | 类型 | 是否必填 | 描述 | --- | --- | --- | --- treeColIndex | int | 是 | 树形图标显示在第几列 treeSpid | object | 是 | 最上级的父级id treeIdName | string | 否 | id字段的名称 treePidName | string | 否 | pid字段的名称 treeDefaultClose | boolean | 否 | 是否默认折叠 treeLinkage | boolean | 否 | 父级展开时是否自动展开所有子级 **treeColIndex** 树形图标(箭头和文件夹、文件的图标)显示在第几列, 索引值是cols数组的下标。 **treeSpid** 最上级的父级id,比如你可以规定pid为0或-1的是最顶级的目录。 **treeIdName** treetable是以id和pid字段来渲染树形结构的,如果你的数据没有id和pid字段,你可以指定id和pid字段的名称。 **treePidName** pid在你的数据字段中的名称。 **treeDefaultClose** 默认是全部展开的,如果需要默认全部关闭,加上treeDefaultClose:true即可。 **treeLinkage** 父级展开时是否自动展开所有子级 ### 注意事项 - 不能使用分页功能,即使写了page:true,也会忽略该参数。 - 不能使用排序功能,不要开启排序功能。 - table.reload()不能实现刷新,请参考demo的刷新。 - 除了文档上写的treetable.xxx的方法之外,其他数据表格的方法都使用table.xxx。 - 建议删除和修改请求完后台之后请刷新(重新渲染)表格,最好不要使用obj.delete方式删除。 ### 其他方法 **全部展开** ```javascript treetable.expandAll('#table1'); ``` **全部折叠** ```javascript treetable.foldAll('#table1'); ``` # 常见问题