2023年7月9日发(作者：)

使⽤JQueryTreeTable实现树形表格⾸先了解什么是TreeTable？treeTable 是跨浏览器、性能很⾼的 jQuery 的树表组件，它使⽤⾮常简单，只需要引⽤ jQuery 库和⼀个 js ⽂件，接⼝也很简单。优点：1. 兼容主流浏览器：⽀持 IE6 和 IE6+, Firefox, chrome, Opera, Safari2. 接⼝简洁：在普通表格的基础上增加⽗⼦关系的⾃定义标签就可以3. 组件性能⾼：内部实现了只绑定了 table 的事件、使⽤了 css sprite 合并图⽚等4. 提供两种风格：通过参数来设置风格废话不多说，先上效果图：页⾯引⽤：CSS部分JS部分注：css和js 可以在CDN中搜索treetable即可下载，CDN地址：参数配置theme: string 主题，有两个选项：default、vsStyle. 默认:defaultexpandLevel: int 树表的展开层次. 默认:1column: int 可控制列的序号. 默认:0，即第⼀列onSelect: function 拥有 controller ⾃定义属性的元素的点击事件，return false 则中⽌展开beforeExpand: 展开⼦节点前触发的事件属性说明id: string ⾏的 idpId: string ⽗⾏的 idcontroller: bool 指定某⼀个元素是否可以控制⾏的展开hasChild: bool 指定某⼀个 tr 元素是否有孩⼦（动态加载需⽤到）isFirstOne: bool 指定某⼀个 tr 元素是否是第⼀个孩⼦（⾃动⽣成属性，只读）isLastOne: bool 指定某⼀个 tr 元素是否是最后⼀个孩⼦（⾃动⽣成属性，只读）prevId: string 前⼀个兄弟节点的 id（⾃动⽣成属性，只读）depth: string 当前⾏的深度（⾃动⽣成属性，只读）使⽤⽅法HTML结构代码

//注意：此处的 id 和pId 是重点

类⽬ID	类⽬名称	状态	排列序号	更新时间	操作
${}	${}	${}	${der}

写到这⾥其实雏形的树形表格列表已经可以展⽰出来，但是为了更好的体验，让表格的⽗⼦关系展⽰的更加明了，于是加⼊了服务端的排序代码（引⽤之前⼀个⼩项⽬的代码）：@Controller@RequestMapping(value = "item/cat")public class ItemCatController extends AbstractbaseTreeController { @GetMapping(value = "list") public String list(Model model) { List itemCatsBeforeList = ll(); //新建⼀个集合⽤于存放排序后的 查询内容 List itemCatsAfterList = new ArrayList<>(); // 0L 代表长整形 Long sort(0L, itemCatsBeforeList, itemCatsAfterList); ribute("list", itemCatsAfterList); return "item/cat/list"; } /** * 树形结构排序 * @param parentId ⽗节点ID * @param itemCatsBeforeList 源数据 原始查询的数据 * @param itemCatsAfterList ⽬标数据 新创建的集合 * @return */ protected List sort(Long parentId, List itemCatsBeforeList, List itemCatsAfterList) { for (T entity : itemCatsBeforeList) { if (entId().equals(parentId)) { (entity); sort((), itemCatsBeforeList, itemCatsAfterList); } } return itemCatsAfterList; }}

发布者：admin，转转请注明出处：http://www.yc00.com/web/1688852306a176627.html