DataTables TreeGrid 插件 可以快速实现树形表格

dataTables.treeGrid

  • 插件介绍
  • 更新日志
  • 真实系统展现效果
  • DEMO参考
  • 使用方法
  • DataTable 渲染JSON数据格式
  • HTML数据格式(以DEMO截图代码为例)

插件介绍

针对DataTables写的树形表格插件(什么是DataTables? 可以点击访问官网了解)
在原DataTables基础上可以快速实现树形表格的渲染:
1、支持自定义展开/收缩 图标
2、支持自定义缩进距离
3、N层子集展开父级收缩 子集统一收缩;
4、支持外部调用expandAll() / collapseAll() 方法;

插件地址:https://github.com/lhmyy521125/dataTables.treeGrid

更新日志

2020-4-16:千呼万唤始出来,很多朋友再CSDN博客上反馈了插件的一些问题,博主的公司因为已经很少用dataTable(都使用VUE啦)所以很少去弄这款插件了,今天呢总算抽时间完善了这款插件,更新内容如下:

  • 1、解决dataTable reload() / draw() 时树形失效问题
  • 2、采用新的初始化方式,可以外部调用 expandAll() / collapseAll() 方法
//@example
      var table = $('#example').dataTable( { ... } );
      var tree = new $.fn.dataTable.treeGrid( table );
      tree.expandAll();
      tree.collapseAll();
  • 3、更新后更容易对插件进行扩展,可以自定义自己需要实现的功能,参考expandAll() / collapseAll() 自己定义自己的方法,处理不同的需求

2019-5-8:很多朋友在博客私信说要一份DEMO,今天上传了DEMO样例仅供大家参考;注意要在WEB容器运行
2019-4-11:新增expandAll配置属性,true默认展开,false不展开不配置默认false
2018-10-11:当多层数据时,第一个子集未展开,第二个子集展开,点击父级收缩会出现死循环问题解决;
2018-10-11:多层子集收缩的时候会导致第二级以下的展开不会删除问题;解决方案采用递归方式改写收缩方法

真实系统展现效果

DataTables TreeGrid 插件 可以快速实现树形表格_第1张图片

DEMO参考

GitHub上DEMO的 运行效果,感兴趣的可以自行下载运行体验~~
[DEMO地址:https://github.com/lhmyy521125/dataTables.treeGrid/tree/master/DataTables%20Demo
DataTables TreeGrid 插件 可以快速实现树形表格_第2张图片

使用方法

//注意自行下载 dataTables  


//引入我们写的dataTables  Tree 插件

DataTable 渲染JSON数据格式

// JSON对象数据应包含一个属性“children”作为子集
{
"data": 
    [
        {
            "name": "lhmyy521125",
            ...
            "children": [
                {
                    "name": "hello",
                    ...
                }
            ]
        }
    ]
}  

HTML数据格式(以DEMO截图代码为例)

 
 
部门名称 英文名称 负责人 部门电话 部门地址 主要职能

插件地址:https://github.com/lhmyy521125/dataTables.treeGrid

如果该插件帮助到您,别忘记了点个 star 对我的支持~

你可能感兴趣的:(JQUERY,jquery,datatables,treeGrid,树形表格)