ele-admin / treetable-lay Goto Github PK

View Code? Open in Web Editor NEW

3.0 1.0 1.0 1.67 MB

树形表格treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致，支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。

Home Page: https://whvse.gitee.io/treetable-lay/demo/

License: MIT License

JavaScript 100.00%

treetable layui tree table datatable

treetable-lay's Introduction

树形表格treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致，支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。

演示地址：https://whvse.gitee.io/treetable-lay/demo/
开发文档：https://gitee.com/whvse/treetable-lay/wikis/pages

更新日志

2020-04-27
- 解决refresh方法data模式未转pid形式bug
- 解决单元格编辑报错bug
- 懒加载模式haveChild为true请求完无数据自动更新图标
- useAdmin参数默认改为false(默认不使用admin.ajax)
- 列参数增加thAlign配置表头的对齐方式
2020-04-18 (v3.0)
- 支持拖拽列宽、表头工具栏toolbar
- 支持隐藏显示列、打印、导出
- 支持url、method、where、headers等url方式加载参数，同时兼容之前reqData写法
- cols使用二维数组，支持同layui表格一样配置复杂表头
- 复选框半选状态不再受form.render影响
- 解决ful-xxx高度计算与layui表格有偏差问题
- 解决minWidth参数无效果问题
- 解决图标列溢出不显示省略号的问题
- 对于children形式数据不会用到id属性
- 解决单选获取选中的问题
2019-12-27
- 增加单元格溢出省略，点击悬浮展开全部(2019-12-27)
- 解决空数据时刷新后空提示不移除的bug(2019-12-21)
- 优化固定表头及固定宽度(2019-12-21)
- 获取选中数据增加可获取非半选的选中数据(2019-12-21)
2019-11-18 (v2.0)
- 重构treeTable，不再基于数据表格table模块
- 支持懒加载(异步加载)、支持数据渲染
- 同时支持pid形式数据和children形式数据
- 无需指定最顶级pid，自动查找
- 支持复选框联动，支持半选状态
- 支持折叠状态记忆
- 支持只刷新某个节点下数据
- 支持自定义树形图标
- 支持设置节点勾选、获取勾选节点
- 支持行单击、双击、单元格单击、双击事件
- 支持单元格编辑，并且支持校验格式
- 支持固定表头，支持ful-xxx的写法
- 支持自定义复杂表头
- 优化搜索功能，提供更好的搜索体验
2018-07-22 (v1.0)
- 基于数据表格table模板实现树形结构
- 实现折叠/展开功能

小问题会抽时间解决，大升级会间隔较长，目前只有固定列未实现，分页和排序在树中不常见，懒加载可代替分页。

导入模块

最新版只需要一个treeTable.js即可，无需css：

layui.config({
    base: '/'  // 配置模块所在的目录
}).use(['treeTable'], function () {
    var treeTable = layui.treeTable;

});

如果不会引用先到layui官网查看模块规范介绍。

效果展示

treetable-lay's People

Contributors

Stargazers

Watchers

Forkers

yujingtaojing

treetable-lay's Issues

TableTree 渲染单列字体引入dict 字典后无法对字体内容进行过滤区分变色

cols: [
[
{type: 'numbers'},
{type: 'radio'},
{field:'name_zh', title: '栏目', width: 260 },
{align: 'center',field: 'tempid', title: '序号', width: 260 },
{align: 'center',field:'state_open', title: '状态', dict:'status', width: 260},
{align: 'center', toolbar: '#barDemo', title: '操作', width: 260}
]
]

树形栏目不支持自定义格式

我需要对树形目录列做些自定义格式，但是不起作用。（当启用自定义格式的列不是树形目录列的时候，自定义样式就起作用了。）

后台异步请求的时候有问题

跟 layui 原来的table.render 加载数据不一样的一点：后端接口获取数据的时候如果是异步的，你的这个会报错，因为没有拿到数据，但是如果用原来layui 的那种render他会等，等后端请求完成才会执行前端的js代码。

表格行背景颜色

就是一个树形表格,怎么动态地给表格的每一个树添加不同的背景颜色?

如何给子节点加上分页

Uncaught TypeError: Cannot read property 'children' of undefined

TreeTable.prototype.refresh = function (id, data) {
var components = this.getComponents().$table;
var $table = components.$table;

    var d, $tr;
    if (id != undefined) {
        d = getDataById(this.getData(), id, this.options.tree);
        $tr = $table.children('tbody').children('tr[data-id="' + id + '"]');
    }
   ......

}
大佬，麻烦抽时间看下$table，insTb.refresh(id,data);更新提示错误 Cannot read property 'children' of undefined。