基于 layui 的 treeGrid 插件

分享 已结 精帖 215 36309
易
VIP3 2018-3-12
悬赏:20飞吻
20180828全新升级:
-------------------------
更新日志:
(得益于layui良好的设计,可以顺利扩展此插件)
在layui2.3的table组件基础上独立扩展出来针对普通表格和树状表格的插件,主要增加如下功能。
1、【增加】支持树状表格
2、【增加】支持折叠记忆功能(折叠的节点不受父节点折叠状态影响)
3、【增加】动态新增行(一行或多行)
4、【优化】动态删除行(一行或多行)
5、【增加】行内过滤(每次提交会自动提交此区域的参数,需要结合后台使用)
6、【增加】方法式打开或折叠任意节点(table.treeNodeOpen(o,isOpen))
7、【增加】数据刷新query方法(与reload方法区别在于,只刷新数据区域,而不是重新渲染整个table)
8、内部对原来table的渲染方法进行了拆分,以便更精准控制table的行为(分别是生成单元格、生成tr、渲染分页、渲染行内过滤区域、渲染全部、渲染节点内容等等)



-------------------------------------------------------------------------------
因项目需要树状表格,写了此插件。
下载地址: https://gitee.com/lrd110/tree_table_treegrid_based_on_layui
效果:






使用:
<div>
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</div>
<script>
var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
layui.config({
base: 'design/extend/'
}).extend({
treeGrid:'treeGrid'
}).use(['jquery','treeGrid','layer'], function(){
var $=layui.jquery;
treeGrid = layui.treeGrid;//很重要
layer=layui.layer;
ptable=treeGrid.render({
id:tableId
,elem: '#'+tableId
,idField:'id'
,url:'/data2.json'
,cellMinWidth: 100
,treeId:'id'//树形id字段名称
,treeUpId:'pId'//树形父id字段名称
,treeShowName:'name'//以树形式显示的字段
,cols: [[
{width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
,templet: function(d){
var html='';
var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
return addBtn+delBtn;
}
}
,{field:'name', edit:'text',width:300, title: '水果名称'}
,{field:'id',width:100, title: 'id'}
,{field:'pId', title: 'pid'}
]]
,page:false
});

treeGrid.on('tool('+tableId+')',function (obj) {
if(obj.event === 'del'){//删除行
del(obj);
}else if(obj.event==="add"){//添加行
add(obj.data);
}
});
});

function del(obj) {
layer.confirm("你确定删除数据吗?如果存在下级节点则一并删除,此操作不能撤销!", {icon: 3, title:'提示'},
function(index){//确定回调
obj.del();
layer.close(index);
},function (index) {//取消回调
layer.close(index);
}
);
}


var i=1000;
//添加
function add(pObj) {
var param={};
param.name='水果'+Math.random();
param.id=++i;
param.pId=pObj?pObj.id:0;
treeGrid.addRow(tableId,pObj?pObj.LAY_TABLE_INDEX+1:0,param);
}

function print() {
console.log(treeGrid.cache[tableId]);
var loadIndex=layer.msg("对象已打印,按F12,在控制台查看!", {
time:3000
,offset: 'auto'//顶部
,shade: 0
});
}
</script>


{
"msg":"","code":0,
"data":[
{"id":"1", "pId":"0", "name":"水果"},
{"id":"101", "pId":"1", "name":"苹果"},
{"id":"102", "pId":"1", "name":"香蕉"},
{"id":"103", "pId":"1", "name":"梨"},
{"id":"10101", "pId":"101", "name":"红富士苹果"},
{"id":"10102", "pId":"101", "name":"红星苹果"},
{"id":"10103", "pId":"101", "name":"嘎拉"},
{"id":"10104", "pId":"101", "name":"桑萨"},
{"id":"10201", "pId":"102", "name":"千层蕉"},
{"id":"10202", "pId":"102", "name":"仙人蕉"},
{"id":"10203", "pId":"102", "name":"吕宋蕉"}
]
,"count":29,"is":true,"tip":"操作成功!"
}
回帖
  • [good] nice。没有深入的看实现,不过觉得如果要完善的话还有一些功能应该有的:比如提供类似ztree对节点的操作的功能,比如增加删除节点,还有就是checkbox的功能也要像树一样的体验,勾选父节点子节点应该是响应的,全选半选状态等等。可能如果要更加健壮还需要话更多的时间精力去处理,因为只是看起来是跟用起来是还是有区别的,个人愚见
    2 回复
  • @ 能否添加您一个联系方式 如果有什么地方不太清楚可以询问您吗
    3 回复
  • 易
    2018-3-12
    @寒小寒丫 对于前端,我也是一知半解,但没有可用的插件,最后只能自己顶硬上。 可以交流一下 QQ:1042040685
    3 回复
  • @ 我已经全部按照你的DEMO来弄了,但是还是出现一些比较奇怪的问题
    默认在全部折叠的情况下,所有的数据还是全部展示出来 了

    2 回复
  • mark,非常好,保留一下
    1 回复
  • @ 修改了你的部分源码,效果总算是出来了
    代码 421行
    var data = that.filterArray(res[response.dataName],options.treeId,options.treeUpId);
    //res.data=data[0];
    res[response.dataName] = data[0];
    1 回复
  • 易
    2018-3-16
    @小蜜蜂0 此功能暂时没有加上,近期将会更新补上。
    1 回复
  • 易
    2018-4-4
    @小蜜蜂0 全部操作用treeGrid,不是table了。
    1 回复
  • 易
    2018-9-2
    @sleep_开拓者

    可以在码云重新更新,现在顺序不要求。
    1 回复
  • 易
    2018-9-4
    @sleep_开拓者 现在新版本,数据源顺序没有要求了。无序的一样可以,可以试试,有问题的话,欢迎在码云或layui上提出来。
    1 回复