基于 layui 的 treeGrid 插件

分享 已结 精帖
194 21944
易
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的功能也要像树一样的体验,勾选父节点子节点应该是响应的,全选半选状态等等。可能如果要更加健壮还需要话更多的时间精力去处理,因为只是看起来是跟用起来是还是有区别的,个人愚见
    1 回复
  • @ 能否添加您一个联系方式 如果有什么地方不太清楚可以询问您吗
    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 回复
  • 请问有全选功能吗?以及表格中的表单操作功能?
    0 回复
  • 易
    2018-3-12
    没有太多改动,多数操作应该还跟原来一致。
    你可以下载下来测试一下。(我自己这边是遇到使用问题,就修改一个。)

    -------------------------------------
    主要就是用方法将排序成表格顺序,增加树形图标。
    0 回复
  • 易
    2018-3-12
    @寒小寒丫
    没有太多改动,多数操作应该还跟原来一致。
    你可以下载下来测试一下。(我自己这边是遇到使用问题,就修改一个。)

    -------------------------------------
    主要就是用方法将排序成表格顺序,增加树形图标。
    0 回复
  • 下载测试了一下,大概500条数据,折叠执行效率很低。点了之后很久才关闭,再点打开,又全部展开了。
    0 回复
  • 易
    2018-3-12
    @菜先生 把测试数据给一下? 我这边效率不高,用的方法都比较笨,暂时没优化。
    0 回复
  • 尴尬,回复字数限制,搞不上来。
    0 回复
  • 漂亮,标记一下。
    0 回复
  • 易
    2018-3-13
    @菜先生
    20180313更新:根据反馈进行了修改,本人测试最大4层级,约1千条记录,流畅运行。【本例子不适合超大量数据展示,终极目标是支持万级数据】
    0 回复
  • 易
    2018-3-13
    @岁月小偷 对,离完善有一段距离。 需要花时间精力咯!
    0 回复
  • 俗人
    2018-3-13
    留名备用。。。
    0 回复
  • RestOnThis
    2018-3-13
    请问一下,我用layui.all.js的,如何使用你的treeGrid.js啊,是要自己重新打包么?
    0 回复
  • 易
    2018-3-13
    @RestOnThis

    在layAll.js中增加调用

    //内置模块
    ,modules = {
    ,treeGrid: 'modules/treeGrid'//增加此行
    };
    0 回复
  • RestOnThis
    2018-3-13
    @
    [//cdn.layui.com/upload/2018_3/7423584_1520942812238_15909.png]
    这样不行啊,layui.treeGrid拿不到。
    是不是必须用模块化方式加载?
    0 回复
  • RestOnThis
    2018-3-13
    0 回复
  • 易
    2018-3-14
    @RestOnThis 应该要重新打包,我没有直接引用layui.all.js。

    刚刚看了一下,直接引用layui.all.js 是包含了全部的模块js的,所以应该不能包含自定义的模块吧。
    0 回复
  • 添加到项目里,怎么没有折叠效果了呢

    0 回复
  • 易
    2018-3-14
    @後生哥哥 你用的是最新版本的吗? 如不是下载最新版本,试试。 (看上起配置都对了。)
    0 回复
  • @ 刚刚从码云 上下载的
    0 回复
  • 易
    2018-3-14
    @後生哥哥 你用码云上面的例子也不行吗?
    0 回复
  • @ 码云上的例子是可以运行的,你是不是还改了别的组件的代码?我现在只是把treeGrid.js 放到目录里面来,然后我用的layui是2.2.5的,你用的是2.2.45
    0 回复