使用JQuery TreeTable实现树形表格

首先了解什么是TreeTable？

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

优点：

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

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

页面引用：

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 代表长整形  Long
        sort(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;
    }
}