概述
后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件。 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加载的树状表格~
1. 使用说明
本组件基于treetable.js组件进行编写,最大的区别在treetable.js无法进行异步加载,而本组件则使用异步加载树状表格。 因此,若无异步加载需求,建议直接使用treetable.js,有异步加载需求时,可使用本组件。
由于treetable.js的源码进行过修改,因此不能使用官方下载的原版本(如需使用,可私聊作者获取)
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(exports){
var treetable = layui.treetable,
table = layui.table,