aop实现table表格树 支持异步加载、排序、分页、重载、树形单元格小图标编辑操作等等等

分享 已结 5 913
单身狗278
单身狗278 2020-5-22
悬赏:20飞吻
在写下这篇分享文章之前,就在想未来的在哪里?亦或者该去干嘛?
思来想去,还是觉得好好的找份工作,努力工作才是最实在的,而不用在杞人忧天。。。。。。。。

话不多说,说点实际的!!!
用layui将近3年了,不管做什么系统,做菜单管理或者权限管理,都绕不过表格树,但目前layui还真没有这东西的
不过表格树的插件是多种多样的,因此无法形成统一的ui而使管理成本上升,亦或者使开发成本过高
看了扩展组件区域的插件,还真有几款不错的表格树插件,但功能也不太完善,所以自己着手着基于layui table写一个吧
搞着搞着,过了4天,表格树就已经孵化出来了,在此跟大家分享一下。
感觉不好用或者觉得太辣鸡的,请口下留情[哈哈]
如有我未察觉的bug,希望提出些改正建议,也好做出相应的改动。

此表格树支持的操作
- 异步/同步加载 => layui table的加载
- 节点单元格动态小图标工具编辑、新增、删除和排序操作 => 增删改查
- 排序 => 全表排序、指定节点/节点id 排序
- 分页
- 指定节点或节点id删除节点及其叶子节点
- 叶子节点选中、上级节点自动选中、反之、自动清除选中
- 节点折叠记忆
- 重载
- 局部刷新
- 关键字检索及检索前折叠状态记忆
- 重置搜索前折叠状态
- 传参新增树形叶子节点、数据为空时,为空白节点
- 传参新增最上级节点
- 基于table tool事件进行aop增强,实现树形表格编辑、修改及下拉框和时间选择框的整合
- 指定节点或者节点id展开/关闭节点及其叶子节点
- 全部展开/折叠
- layui table api方式的操作
- 配置简单
- 小图标可自定义
- 节点id去重功能
- 无需额外的css样式

组件引入:
 layui.config({
base: 'module/'
}).extend({
tableEdit:'js/tableEdit' //表格树依赖我另外写的tableEdit模块,本项目就有。
,tableTree:'js/tableTree'
}).use(['table','layer',"tableTree"], function () {
var tableTree = layui.tableTree;

});
特么的废话这么多,直接撸上demo示例的代码吧

<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button type="button" lay-event="tableTreeEdit" id="btn1" class="layui-btn layui-btn-sm">添加最上级节点</button>
<button type="button" lay-event="tableTreeEdit" id="btn2" class="layui-btn layui-btn-sm">获取勾选数据</button>
<button type="button" lay-event="tableTreeEdit" id="btn3" class="layui-btn layui-btn-sm">获取全部数据</button>
<button type="button" lay-event="tableTreeEdit" id="btn4" class="layui-btn layui-btn-sm">记忆折叠节点3</button>
<button type="button" lay-event="tableTreeEdit" id="btn5" class="layui-btn layui-btn-sm">记忆展开节点5</button>
<button type="button" lay-event="tableTreeEdit" id="btn6" class="layui-btn layui-btn-sm">关闭所有子叶节点</button>
<button type="button" lay-event="tableTreeEdit" id="btn7" class="layui-btn layui-btn-sm">展开所有子叶节点</button>
<button type="button" lay-event="tableTreeEdit" id="btn8" class="layui-btn layui-btn-sm">获取表格树配置</button>
<button type="button" lay-event="tableTreeEdit" id="btn9" class="layui-btn layui-btn-sm">重载表格树</button>
<button type="button" lay-event="tableTreeEdit" id="btn10" class="layui-btn layui-btn-sm">删除节点1</button>
<button type="button" lay-event="tableTreeEdit" id="btn11" class="layui-btn layui-btn-sm">重置搜索</button>
</div>
</script>
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
<script>
layui.config({
base: 'module/'
}).extend({
tableEdit:'js/tableEdit' //表格树依赖我另外写的tableEdit模块,本项目就有。
,tableTree:'js/tableTree'
}).use(['table','layer',"tableTree"], function () {
var table = layui.table
,$ = layui.$
,tableTree = layui.tableTree
,layer = layui.layer;
var params = [
{name:1,value:"张三1"}
,{name:2,value:"张三2"}
,{name:3,value:"张三3"}
,{name:4,value:"张三4"}
,{name:5,value:"张三5"}
];
function templet(d,field){
if(!d[field])return '';
if(typeof d[field] === 'string')return d[field];
if(!Array.isArray(d[field]))return d[field].value ? d[field].value : '';
var str = [];
d[field].forEach(function (e) {str.push(e.value)});
return str.join(' || ');
}
var treeTable = tableTree.render({
elem: '#tableId'
,id:'tableTree'
,url:'module/json/data.json'
,height: 'full-90'
,size:'sm'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,page: true
,treeConfig:{ //表格树所需配置
showField:'name' //表格树显示的字段
,treeid:'id' //treeid所对应字段的值在表格数据中必须是唯一的,且不能为空。
,treepid:'pid'//父级id字段名称
,iconClass:'layui-icon-triangle-r' //小图标class样式 窗口图标 layui-icon-layer
}
,cols: [[
{type:'checkbox'}
,{field:'name',title: 'name',width:259}
,{field:'id',title:'id',width:120,sort:true}
,{field:'danxuan',align:'center',event:'danxuan'
,config:{type:'select',data:params}
,title: '单选',width:120,templet:templet
}
,{field:'duoxuan', title: '多选',event:'duoxuan'
,config:{type:'select',data:params,enabled:true}
,width:120,templet:templet
}
,{field:'birthday', title: '生日',width:120,event:'duoxuan'
,config:{type:'date',dateType:'date'},templet:templet
}
,{field:'aihao', title: '爱好',width:120,event:'aihao'
,config:{type:'input'},templet:templet
}
]],done:function () {
treeTable.openAllTreeNodes()
treeTable.closeTreeNode(5)
}
});
/**
*表格的增删改都会回调此方法
* 与table.on(tool(lay-filter))用法一致。
**/
tableTree.on('tool(tableEvent)',function (obj) {
var field = obj.field; //单元格字段
var value = obj.value; //修改后的值
var data = obj.data; //当前行数据
var event = obj.event; //当前单元格事件属性值
//event为del为删除 add则新增 edit则修改。这个三个值固定死了,切莫定义与之三个重复的event。
if(event !== 'del' && event !== 'add' ){
var update = {};
update[field] = value;
obj.update(update);
console.log(obj)
}

if(event === 'del'){
obj.del();
}
if(event === 'add'){
//可ajax异步请求后台,后台返回数据后用 obj.add(,rs) 进行回调生成表格树。
setTimeout(function () {
var rs = [
{"id":11,"name":"张三11","treeList":[{"id":14,"name":"张三14","treeList":[{"id":15,"name":"张三15","danxuan":null,"duoxuan":[{"name":1,"value": "张三1"},{"name":2,"value": "张三2"}],"birthday":""}],"danxuan":null,"duoxuan":[{"name":1,"value": "张三1"},{"name":2,"value": "张三2"}],"birthday":""}],"danxuan":null,"duoxuan":[{"name":1,"value": "张三1"},{"name":2,"value": "张三2"}],"birthday":""},
{"id":null,"name":"张三12","danxuan":null,"duoxuan":[{"name":1,"value": "张三1"},{"name":2,"value": "张三2"}],"birthday":""},
{"id":null,"name":"张三13","danxuan":null,"duoxuan":[{"name":1,"value": "张三1"},{"name":2,"value": "张三2"}],"birthday":""}
];
//在此模拟ajax异步的请求,返回数据调用以下函数。
//该方法新增下级节点,可以直接新表格树。
//有参数则,按照参数生成行,无参数则生成空行。参数类型为数组
//obj.add() 空行
obj.add(rs);
},200);
}
});

/**
*监听复选框选中状态
**/
tableTree.on('checkbox(tableEvent)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
layer.msg(JSON.stringify(obj.data));
console.log($(this).parents('tr')[0])
//treeTable.openTreeNode($(this).parents('tr'));
//treeTable.delTreeNode($(this).parents('tr').next());
});

table.on('toolbar(tableEvent)', function(obj){
var id = $(this).attr("id");
if(id==="btn1"){
//data可以为空,为空则创建空行,否则按照data数据生成行
var data = {"id":13,"pid":333,"name":"张三13","danxuan":null,"duoxuan":[{"name":1,"value": "张三1"},{"name":2,"value": "张三2"}],"birthday":""};
treeTable.addTopTreeNode();//新增最上级节点
}else if(id === 'btn2') {
layer.msg(JSON.stringify(treeTable.getCheckedTreeNodeData())); //获取选中行的树状数据(整个链条数据)
}else if(id === 'btn3') {
layer.msg(JSON.stringify(treeTable.getTableTreeData()));//获取表格树所有数据
}else if(id === 'btn4') {
treeTable.closeTreeNode('3'); // 根据tr或者树id关闭相对应树节点
}else if(id === 'btn5') {
treeTable.openTreeNode(5); // 根据tr或者树id展开相对应树节点
}else if(id === 'btn6') {
treeTable.closeAllTreeNodes(); //关闭所有树节点
}else if(id === 'btn7') {
treeTable.openAllTreeNodes(); //展开所有树节点
}else if(id === 'btn8') {
layer.msg(JSON.stringify(treeTable.getTreeOptions())); //获取表格配置
}else if(id === 'btn9'){
treeTable.reload(); //表格树进行reload
}else if(id === 'btn10') {
treeTable.delTreeNode('1'); //根据tr元素或者节点id删除节点及相关叶子节点
}else {
treeTable.clearSearch(); //重置搜索
}
});

/**
* 表格树排序,与layui进行了整合。
*/
table.on('sort(tableEvent)', function(obj){
treeTable.sort({field:obj.field,desc:obj.type === 'desc'})
});

$('#aassss').on('change',function () {
treeTable.keywordSearch(this.value); //关键词搜索树
});
});
</script>
好不好用不知道,用了再说。

再来部分效果图


好久没码字了,太特么累了,跑路!

[嘻嘻]

附上码云地址:
https://gitee.com/yangqianlong98/tableTree
回帖