layui tree 加载慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）

概述

后台框架中使用树状表格是非常常用的操作，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.4 组件源码

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

layui.define(['index','form','treetable','jquery','treetable'],function(e