使用JQuery TreeTable实现树形表格

首先了解什么是TreeTable？

treeTable 是跨浏览器、性能很高的 jQuery 的树表组件，它使用非常简单，只需要引用 jQuery 库和一个 js 文件，接口也很简单。

优点：

兼容主流浏览器：支持 IE6 和 IE6+, Firefox, chrome, Opera, Safari
接口简洁：在普通表格的基础上增加父子关系的自定义标签就可以
组件性能高：内部实现了只绑定了 table 的事件、使用了 css sprite 合并图片等
提供两种风格：通过参数来设置风格

废话不多说，先上效果图：

页面引用：

CSS部分

<link href="/static/assets/apps/plugins/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />

JS部分

<script src="/static/assets/apps/plugins/treeTable/jquery.treeTable.min.js" type="text/javascript" ></script>

注：css和js 可以在CDN中搜索treetable即可下载，CDN地址：https://www.bootcdn.cn/

参数配置

theme: string 主题，有两个选项：default、vsStyle. 默认:default
expandLevel: int 树表的展开层次. 默认:1
column: int 可控制列的序号. 默认:0，即第一列
onSelect: function 拥有 controller 自定义属性的元素的点击事件，return false 则中止展开
beforeExpand: 展开子节点前触发的事件

属性说明

id: string 行的 id
pId: string 父行的 id
controller: bool 指定某一个元素是否可以控制行的展开
hasChild: bool 指定某一个 tr 元素是否有孩子（动态加载需用到）
isFirstOne: bool 指定某一个 tr 元素是否是第一个孩子（自动生成属性，只读）
isLastOne: bool 指定某一个 tr 元素是否是最后一个孩子（自动生成属性，只读）
prevId: string 前一个兄弟节点的 id（自动生成属性，只读）
depth: string 当前行的深度（自动生成属性，只读）

使用方法

<script>$("#treeTable").treeTable({"column":1,"expandLevel": 2});
</script>

HTML结构代码

<table id="treeTable" class="table table-striped table-bordered table-hover"><thead><tr role="row"><th> 类目ID </th><th> 类目名称 </th><th> 状态</th><th> 排列序号</th><th> 更新时间</th><th>操作</th></tr></thead><tbody><c:forEach items="${list}" var="itemcat">//注意：此处的 id 和pId 是重点<tr id="${itemcat.id}" pId="${itemcat.parentId}"><td>${itemcat.id}</td><td>${itemcat.name}</td><td>${itemcat.status}</td><td>${itemcat.sortOrder}</td><td><fmt:formatDate value="${itemcat.updated}" pattern="yyyy-MM-dd HH:mm:ss" /></td>                 </tr></c:forEach></tbody>
</table>

写到这里其实雏形的树形表格列表已经可以展示出来，但是为了更好的体验，让表格的父子关系展示的更加明了，于是加入了服务端的排序代码（引用之前一个小项目的代码）：

@Controller
@RequestMapping(value = "item/cat")
public class ItemCatController extends AbstractbaseTreeController<ItemCat, ItemCatService> {@GetMapping(value = "list")public String list(Model model) {List<ItemCat> itemCatsBeforeList = service.seletAll();//新建一个集合用于存放排序后的 查询内容List<ItemCat> itemCatsAfterList = new ArrayList<>();//  0L 代表长整形  Longsort(0L, itemCatsBeforeList, itemCatsAfterList);model.addAttribute("list", itemCatsAfterList);return "item/cat/list";}/***  树形结构排序* @param parentId  父节点ID* @param itemCatsBeforeList  源数据    原始查询的数据* @param itemCatsAfterList  目标数据   新创建的集合* @return*/protected List<T> sort(Long parentId, List<T> itemCatsBeforeList, List<T> itemCatsAfterList) {for (T entity : itemCatsBeforeList) {if (entity.getParentId().equals(parentId)) {itemCatsAfterList.add(entity);sort(entity.getId(), itemCatsBeforeList, itemCatsAfterList);}}return itemCatsAfterList;}
}

使用JQuery TreeTable实现树形表格相关推荐

bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
LayUI treetable树形表格的实现，数据格式正确，不显示的解决方案和在这个过程中遇到的坑~ 认真看你会得到一些想要的答案。
先给大家看下效果吧! 我这边只是针对数据显示的问题做了解释.并没有增删改查.找增删改查的同学可以不用看了. 做出这样的效果,首先我们要借用LayUI的内置插件,treetable.js 网上有很多,之 ...
layui树形表格（treetable）列数据合计
项目中遇到的问题,按要求对后台数据以树形列表(使用layui的第三方扩展组件,使用方法自行百度)展示之后.又来了新的需求,需要对展开后的子列表进行统计并将结果显示到父级列表.百度了半天没找到相关的示例 ...
树形表格treeTable插件实现固定列功能
因为要做树形表格使用treeTable插件,但目前插件作者还没有更新表格固定列的功能,恰巧项目又需要实现表格固定列这一需求,所以自己写了能实现固定列的函数. <script>//固定列fu ...
实现layui的树形表格treeTable
实现layui的树形表格treeTable,layui中有可以使用 'tree','table' , 进而使用layui.treeGird实现 layui.treeGird({elem: '#dem ...
layui 树形表格
最近的一个项目,用layui里的表格要实现树形表格功能,去官网查找没有,最后在网上找了一位大神开发的插件-treeTable. 插件地址演示地址: https://whvse.gitee.io/tr ...
DataTables TreeGrid 插件可以快速实现树形表格
dataTables.treeGrid 插件介绍更新日志真实系统展现效果 DEMO参考使用方法 DataTable 渲染JSON数据格式 HTML数据格式(以DEMO截图代码为例) 插件介绍针 ...
layui树形懒加载_layui树形表格支持非异步和异步加载
layui树形表格支持非异步和异步加载. 使用示例如下: 展开全部展开一层折叠全部折叠一层 layui.config({ base: '/uui/treetable-lay/module/' } ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
jQuery LigerUI 使用教程表格篇(1)
阅读目录第一个例子数据结构两种绑定数据的方式配置column 自定义表头自定义单元格排序与分页事件与方法第一个例子简介 ligerGrid是ligerui系列插件的核心控件,用户可以 ...

使用JQuery TreeTable实现树形表格

首先了解什么是TreeTable？

treeTable 是跨浏览器、性能很高的 jQuery 的树表组件，它使用非常简单，只需要引用 jQuery 库和一个 js 文件，接口也很简单。

优点：

废话不多说，先上效果图：

页面引用：

注：css和js 可以在CDN中搜索treetable即可下载，CDN地址：https://www.bootcdn.cn/

参数配置

属性说明

使用方法

HTML结构代码

写到这里其实雏形的树形表格列表已经可以展示出来，但是为了更好的体验，让表格的父子关系展示的更加明了，于是加入了服务端的排序代码（引用之前一个小项目的代码）：

使用JQuery TreeTable实现树形表格相关推荐

最新文章

热门文章