使用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;
    }
}

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值