• 概述
• 1. 使用说明
• 2. 使用需知
  • 2.1 本组件依赖于treetable.js【重中之重】
  • 2.2 本组件基于layUIAdmin进行使用
  • 2.3 本组件的方法支持treetable.js的所有方法；
  • 2.4 本组件不支持的其他方法，均可使用layui-table组件的方法。
  • 2.5 组件源码
• 【附】 非异步加载的treetable.js使用方式
  • 1.简介
  • 2.使用方法
    • 2.1.引入模块
    • 2.2.渲染表格
    • 2.3.参数说明
    • 2.4.注意事项
    • 2.5.其他方法
    • 2.6.如何修改图标
    • 2.7.截图

概述

后台框架中使用树状表格是非常常用的操作，layUI本身并没有这种组件。 第三方的treetable.js做到了完美的实现，但是不能实现在双击时异步加载数据，本文就是站在了巨人的肩膀上实现的异步加载的树状表格~

1. 使用说明

  本组件基于treetable.js组件进行编写，最大的区别在treetable.js无法进行异步加载，而本组件则使用异步加载树状表格。
  因此，若无异步加载需求，建议直接使用treetable.js，有异步加载需求时，可使用本组件。
  本组件treetableAsync.js下载地址：https://pan.baidu.com/s/1qZXi7mLJj0ZvjMd4mGbjFA 提取码：808p
  本组件所依赖的treetable.js下载地址：https://pan.baidu.com/s/1fx5_sFRb0Noa4NCIdDoltw 密码：e891 （源码有修改，因此不能使用官方下载的原版本）

2. 使用需知

2.1 本组件依赖于treetable.js【重中之重】

  由于本组件依赖于treetable.js,因此使用本组件时，需首先引入treetable.js，方可使用。 但由于treetable.js的源码进行过修改，因此不能使用官方下载的原版本。
  代码示例：

layui.config({     base: '../../common/' }).extend({     index: 'lib/index',     treetable: "../lib/extend/treetable", // 使用异步加载treetableAsync，必须先引入treetable     treetableAsync : '../lib/extend/treetableAsync' })

2.2 本组件基于layUIAdmin进行使用

  本组件使用中的Ajax请求，基于layUIAdmin的admin.req()进行。 如果不使用layUIAdmin，需要自行调整源码。

2.3 本组件的方法支持treetable.js的所有方法；

  本组件中所用的所有方法，均基于支持treetable.js中所使用的方法，因此在treetable.js中可以调用的方法，均可使用treetableAsync调用。
  例如：

treetableAsync.expandAll('#dataList'); // 等同于 treetable.expandAll('#dataList');

2.4 本组件不支持的其他方法，均可使用layui-table组件的方法。

  本组件及treetable.js所不支持的方法，均可使用layUI原生的数据表格组件的相应方法。
  本组件不支持列表的toolbar操作，则可以使用table原生的事件监听：

//列表操作 table.on('tool(dataList)', function (obj) { })

2.5 组件源码

  本组件源码附上，大家有疑问可以评论留言。

layui.define(['index','form','treetable','jquery',
                        
关键字：