基于 layui 的 treeGrid 插件

分享 未结 精帖
121 12905
易
VIP3 2018-3-12
悬赏:20飞吻
20180313更新:根据反馈进行了修改,本人测试最大4层级,约1千条记录,流畅运行。【本例子不适合超大量数据展示,终极目标是支持万级数据】

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



此例子是在http://fly.layui.com/jie/22685/参考下改写(实际上区别很大,可以认为是完全不同的两个插件)

调用例子:
<body class="layui-layout-body">
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
<script>
layui.use(['element', 'layer', 'form', 'upload', 'treeGrid'], function () {
var treeGrid = layui.treeGrid; //很重要
var treeTable =treeGrid.render({
elem: '#treeTable'
,url:'data.json'
,cellMinWidth: 100
,treeId:'id'//树形id字段名称
,treeUpId:'pId'//树形父id字段名称
,treeShowName:'name'//以树形式显示的字段
,cols: [[
{field:'name', edit:'text',width:'400', title: '水果'}
,{field:'id', edit:'text',width:'100', title: 'id'}
,{field:'pId', edit:'text',width:'100', title: 'pId'}
]]
,page:false
});
});
</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":"操作成功!"
}
回帖
  • @ 能否添加您一个联系方式 如果有什么地方不太清楚可以询问您吗
    3 回复
  • 易
    2018-3-12
    @寒小寒丫 对于前端,我也是一知半解,但没有可用的插件,最后只能自己顶硬上。 可以交流一下 QQ:1042040685
    3 回复
  • mark,非常好,保留一下
    1 回复
  • [good] nice。没有深入的看实现,不过觉得如果要完善的话还有一些功能应该有的:比如提供类似ztree对节点的操作的功能,比如增加删除节点,还有就是checkbox的功能也要像树一样的体验,勾选父节点子节点应该是响应的,全选半选状态等等。可能如果要更加健壮还需要话更多的时间精力去处理,因为只是看起来是跟用起来是还是有区别的,个人愚见
    1 回复
  • @ 我已经全部按照你的DEMO来弄了,但是还是出现一些比较奇怪的问题
    默认在全部折叠的情况下,所有的数据还是全部展示出来 了

    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 回复
  • 请问有全选功能吗?以及表格中的表单操作功能?
    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 回复
  • 易
    2018-3-15
    @後生哥哥 没有对任何其他组件进行修改。

    你再下载吧,更新了代码,支持data方式加载(不建议使用data方式加载)
    0 回复
  • @ 昨天已经改成URL加载的方式了,个人比较倾向于数据格式的问题,昨天研究了一下源码,还没找到具体问题
    0 回复