插件介绍

针对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() 方法

//@examplevar 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：多层子集收缩的时候会导致第二级以下的展开不会删除问题；解决方案采用递归方式改写收缩方法

真实系统展现效果

DEMO参考

GitHub上DEMO的运行效果，感兴趣的可以自行下载运行体验~~
[DEMO地址：https://github.com/lhmyy521125/dataTables.treeGrid/tree/master/DataTables%20Demo

使用方法

//注意自行下载 dataTables
<script src='您的资源目录/jquery.js'></script>
<script src='您的资源目录/jquery.dataTables.min.js'></script>
//引入我们写的dataTables  Tree 插件
<script src='您的资源目录/dataTables.treeGrid.js'></script>

DataTable 渲染JSON数据格式

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

HTML数据格式（以DEMO截图代码为例）

 <!-- DEMO样例仅供大家参考；注意要在WEB容器运行 如：IIS、Nginx、Tomcat等 否则AJAX会以 file:// 请求出现错误；--><table class="table table-striped table-bordered table-hover" id="treetable"><thead><tr><th></th><th>部门名称</th><th>英文名称</th><th>负责人</th><th>部门电话</th><th>部门地址</th><th>主要职能</th></tr></thead><tbody></tbody></table><script type="text/javascript">var dataTable;var tree;$(function () {dataTable = $('#treetable').DataTable({/**l - Length changing 改变每页显示多少条数据的控件f - Filtering input 即时搜索框控件t - The Table 表格本身i - Information 表格相关信息控件p - Pagination 分页控件r - pRocessing 加载等待显示信息**/"dom": "tr","ordering": false, //禁用排序"processing": true,"serverSide": true,"ajax": {"url": "json/data.json",// "async": false},"columns": [{className: 'treegrid-control',data: function (item) {if (item.children != null && item.children.length > 0) {return '<span> + </span>';}return '';}},{"data": "name"},{"data": "nameEn"},{"data": "headMan"},{"data": "tel"},{"data": "address"},{"data": "functions"}],"columnDefs": [{"defaultContent": "","targets": "_all"}]});/** 采用对象构建插件，方便我们调用插件内部方法 **/tree = new $.fn.dataTable.TreeGrid(dataTable,{left: 15,expandAll: true,expandIcon: '<span>++</span>',collapseIcon: '<span>--</span>'});});function expandAll(){tree.expandAll();
}function collapseAll(){tree.collapseAll();
}function reload(){dataTable.ajax.reload();
}function draw(){dataTable.draw(false);
}
</script><div>
<button class="btn btn-primary" type="button" onclick="expandAll()">expandAll()</button>
<button class="btn btn-primary" type="button" onclick="collapseAll()">collapseAll()</button>
<button class="btn btn-primary" type="button" onclick="reload()">reload()</button>
<button class="btn btn-primary" type="button" onclick="draw()">draw()</button>
</div></body>
</html>

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

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

DataTables TreeGrid 插件可以快速实现树形表格相关推荐

树形表格TreeGrid
树形表格TreeGrid 展开 1.效果截图 2.数据结构 [{"mcode":"UI","mname":"页面开发模板" ...
不容错过的精美的树形表格treegrid在项目里面使用总结
一问题描述: 树形表格TreeGrid在日常项目中还是运用的比较多的,哪究竟都在什么地方使用呢? 二使用场景 TreeGrid它具体使用在什么地方? 首页您要用TreeGrid,肯定是它的特点满足 ...
php 可以编辑treegrid,TreeGrid（树形表格）
TreeGrid(树形表格) 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象. 树形表格用于显示分层数据表格.它是基于数据表格.组合 ...
树形表格treeTable插件实现固定列功能
因为要做树形表格使用treeTable插件,但目前插件作者还没有更新表格固定列的功能,恰巧项目又需要实现表格固定列这一需求,所以自己写了能实现固定列的函数. <script>//固定列fu ...
TreeGrid(树形表格)
树形表格用于显示分层数据表格.它是基于表格,组合树控件和可编辑表格.树形表格允许用户创建可定制的.异步展开行和显示在多列上的分层数据. 示例使用HTML标签创建树形表格,树形表格遵循数据表格的结构
bootstrap 树形表格渲染慢_bootstrap-table-treegrid数据量较大时渲染太久了
bootstrap-table-treegrid数据量较大时渲染太久了森姐姐 2019-10-23 16:48:51 2260 收藏 2 分类专栏: 遇到的问题最后发布:2019-10-23 16 ...
wps vba宏插件_合并和拆分表格，告别VBA和插件，用WPS表格自带功能一键搞定，而且免费！...
Excel情报局生产搬运分享Excel基础技能 OFFICE知识文艺青年用1%的Excel基础搞定99%的日常工作做一个有文艺范的Excel公众号 Excel是门手艺玩转需要勇气表哥带你玩转 ...
TreeGrid插件简练了解使用
这是TreeGrid插件的简单实用不足之处,请各位大佬指正. TreeGrid插件是生成带层级列表的,可折叠的菜单列表,columns是插件指定的配置每一列展示格式,及使用的数据字段名称的配置项,以j ...
LayUI treetable树形表格的实现，数据格式正确，不显示的解决方案和在这个过程中遇到的坑~ 认真看你会得到一些想要的答案。
先给大家看下效果吧! 我这边只是针对数据显示的问题做了解释.并没有增删改查.找增删改查的同学可以不用看了. 做出这样的效果,首先我们要借用LayUI的内置插件,treetable.js 网上有很多,之 ...

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

dataTables.treeGrid

插件介绍

更新日志

真实系统展现效果

DEMO参考

使用方法

DataTable 渲染JSON数据格式

HTML数据格式（以DEMO截图代码为例）

DataTables TreeGrid 插件可以快速实现树形表格相关推荐

最新文章

热门文章

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

dataTables.treeGrid

插件介绍

更新日志

真实系统展现效果

DEMO参考

使用方法

DataTable 渲染JSON数据格式

HTML数据格式（以DEMO截图代码为例）

DataTables TreeGrid 插件 可以快速实现树形表格相关推荐

最新文章

热门文章

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

DataTables TreeGrid 插件可以快速实现树形表格相关推荐