思来想去,还是觉得好好的找份工作,努力工作才是最实在的,而不用在杞人忧天。。。。。。。。
话不多说,说点实际的!!!
用layui将近3年了,不管做什么系统,做菜单管理或者权限管理,都绕不过表格树,但目前layui还真没有这东西的
不过表格树的插件是多种多样的,因此无法形成统一的ui而使管理成本上升,亦或者使开发成本过高
看了扩展组件区域的插件,还真有几款不错的表格树插件,但功能也不太完善,所以自己着手着基于layui table写一个吧
搞着搞着,过了4天,表格树就已经孵化出来了,在此跟大家分享一下。
感觉不好用或者觉得太辣鸡的,请口下留情
如有我未察觉的bug,希望提出些改正建议,也好做出相应的改动。
此表格树支持的操作
- 异步/同步加载 => layui table的加载
- 节点单元格动态小图标工具编辑、新增、删除和排序操作 => 增删改查
- 排序 => 全表排序、指定节点/节点id 排序
- 分页
- 指定节点或节点id删除节点及其叶子节点
- 叶子节点选中、上级节点自动选中、反之、自动清除选中
- 节点折叠记忆
- 重载
- 局部刷新
- 关键字检索及检索前折叠状态记忆
- 重置搜索前折叠状态
- 传参新增树形叶子节点、数据为空时,为空白节点
- 传参新增最上级节点
- 基于table tool事件进行aop增强,实现树形表格编辑、修改及下拉框和时间选择框的整合
- 指定节点或者节点id展开/关闭节点及其叶子节点
- 全部展开/折叠
- layui table api方式的操作
- 配置简单
- 小图标可自定义
- 节点id去重功能
- 无需额外的css样式
组件引入:
layui.config({特么的废话这么多,直接撸上demo示例的代码吧
base: 'module/'
}).extend({
tableEdit:'js/tableEdit' //表格树依赖我另外写的tableEdit模块,本项目就有。
,tableTree:'js/tableTree'
}).use(['table','layer',"tableTree"], function () {
var tableTree = layui.tableTree;
});