【常用 JS 插件】jQuery TreeTable 树表格插件

TreeTable

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

优点：

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

页面引用

CSS 部分

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

JS 部分

<script src="/static/assets/plugins/treeTable/jquery.treeTable.min.js"></script>

接口

配置参数

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 当前行的深度（自动生成属性，只读）

使用方法

$(function () {$("#treeTable").treeTable({expandLevel: 2,column: 1});
});

HTML 结构代码

<table id="treeTable1" style="width:100%"><tr><td style="width:200px;">标题</td><td>内容</td></tr><tr id="1"><td><span controller="true">1</span></td><td>内容</td></tr><tr id="2" pId="1"><td><span controller="true">2</span></td><td>内容</td></tr><tr id="3" pId="2"><td>3</td><td>内容</td></tr><tr id="4" pId="2"><td>4</td><td>内容</td></tr><tr id="5" pId="4"><td>4.1</td><td>内容</td></tr><tr id="6" pId="1" hasChild="true"><td>5</td><td>注意这个节点是动态加载的</td></tr><tr id="7"><td>8</td><td>内容</td></tr>
</table>

注意事项

这里的 HTML 结构是经过排序的，每行数据必须紧跟其子类目的数据项，结构类似于：

类目 1
- 类目 1-1
- 类目 1-2
- …
类目 2
- 类目 2-1
类目 3
类目 4

服务端排序代码如下：

// 调用方法，0 为约定好的根节点
sortList(sourceList, targetList, 0L);/*** 排序* @param sourceList 数据源集合* @param targetList 排序后的集合* @param parentId 当前的父级类目 ID*/
private void sortList(List<TbContentCategory> sourceList, List<TbContentCategory> targetList, Long parentId) {for (TbContentCategory sourceContentCategory : sourceList) {if (sourceContentCategory.getParentId().equals(parentId)) {targetList.add(sourceContentCategory);// 判断有没有子节点，有则继续追加if (sourceContentCategory.getParent()) {for (TbContentCategory tbContentCategory : sourceList) {if (tbContentCategory.getParentId().equals(sourceContentCategory.getId())) {sortList(sourceList, targetList, sourceContentCategory.getId());break;}}}}}
}

演示效果

【常用 JS 插件】jQuery TreeTable 树表格插件相关推荐

Dynatable – 基于 HTML5 jQuery 的交互表格插件
Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现.Dynatable 的目的是提供一种简单的.可扩展的 API,能够轻松的浏览和操作大规模的 ...
vue前端表格插件_Grid.js - 跨框架的前端表格插件
只想简简单单画个表格,但 React,Vue,Angular,-,这么多前端框架,各自都有不同的表格渲染库.就没有表格库能"一次画表,到处运行"吗?来看看 Grid.js 这个跨框 ...
出位的template.js 基于jquery的模板渲染插件,简单、好用
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
常用[js,css,jquery,html]
目录: 一.javascript事件和属性二.jquery事件和方法三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性事件 onblur ...
html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
bootstrap表格插件php,bootstrap table表格插件使用详解
bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCou ...
html 可编辑表格插件,基于Bootstrap的jquery可编辑表格插件Bootstable
插件描述:Bootstable是一款基于Bootstrap的jquery表格编辑插件.通过该jquery表格编辑插件,会自动为表格添加编辑和删除按钮,使表格可以动态编辑. 更新时间:2019-11-2 ...
html组织架构插件,jQuery组织架构图插件okrTree.js
插件描述:jQuery组织架构图支持拖拽节点,支持插入标记节点,分支节点更新时间:2021-03-02 23:52:07 更新说明: 1. 修改默认主题, 2. 添加自定义主题接口var s = $ ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
360全景html插件,jQuery 360度全景图插件 PANORAMA VIEWER
插件描述:PANORAMA VIEWER将帮助您把全景照片嵌入在网站上.使用鼠标拖拽方试查看效果. 基本用法现在你可以用这个插件显示你的全景照片.因此,首先你必须将最新的jQuery库,jquery ...

【常用 JS 插件】jQuery TreeTable 树表格插件

TreeTable

页面引用

接口

配置参数

属性说明

使用方法

HTML 结构代码

注意事项

演示效果

【常用 JS 插件】jQuery TreeTable 树表格插件相关推荐

最新文章

热门文章