最近在写一个商品分类管理的功能，本来想用layui的树形组件来写，但发现layui原生的tree只能展示title，而分类的其他字段无法展示，这就有点不适用了，无意中看到一位大神自定义写的一个树形表格组件，正好满足我的要求，特此将使用方法以及其中遇到的一些坑记录下来。。。
首先看下treeTable的
好了，如果看完演示到这里你觉得正好符合你的功能要求，就可以继续往下看了，
虽然项目地址中已经把使用介绍的很详细了，但是我在这里要补充一下我遇到的坑：
1，引入模块
打开项目地址，将整个项目下载下来，项目中其他文件可以参考，我们主要用的就是treetable-lay这个文件夹的内容。
下载好项目后把treetable-lay放在我们自己项目的任意位置，但是尽量和layui文件夹放一块，好找！
下面是我放的位置，如图所示：
2，初始化模块配置
要扩展layui的模块使用我们引入的js模块，注意base路径是treetable-lay文件夹所在的父路径，这里出错会报404，extend内容最好不要改。
下面我先每个重点注意事项单独列出来，最后放完整代码。
layui.config({
base: ‘${pageContext.request.contextPath}/layuiadmin/modules/’ // 资源所在路径
}).extend({
treetable: ‘treetable-lay/treetable’
}).use([‘treetable’, ‘table’, ‘layer’], function () {
var treetable = layui.treetable;
var layer = layui.layer;
var table = layui.table;
var $ = layui.jquery;
});
如下图所示：
3，动态渲染表格
数据是从后台查询出来，数据格式不需要做处理，只需要查询所有就行了，官方文档给了json格式，我自己也做了一个简单的封装，一会儿再说json格式。
这里要注意的是treeIdName和treePidName这两个属性，要对应自己查询出来的id和pid。支持自定义这点非常好
<%–树形表格–%>
//js如下：
layui.use([‘treetable’, ‘table’, ‘layer’], function () {
var treetable = layui.treetable;
var layer = layui.layer;
var table = layui.table;
var $ = layui.jquery;
var re;
// 渲染表格
var renderTable = function () {
layer.load(3); //这里好像是要加载几层 ，我的是3层，就写了个3，
re = treetable.render({
elem: ‘#Lay_category_treeTable’,
url: ‘${basepath}/goodscategory/selectTreeTable’,
treeColIndex: 1, // 树形图标显示在第几列
treeSpid: 0, // 最上级的父级id
treeIdName: ‘classId’, // id字段的名称
treePidName: ‘parentId’, // pid字段的名称
treeDefaultClose: true, //是否默认折叠
page: false,
//treeLinkage: true, //父级展开时是否自动展开所有子级
cols: [[
{type: ‘numbers’},
{title: “分类名称”, field: “className”,align:“left”},
{title: “分类编码”, field: “classCode”},
// {title: “分类层级”, field: “classIdLevel”},
{title: “分类状态”, field: “classIdStatus”,templet: ‘#classIdStatusTpl’},
{title: “创建人”, field: “createUser”},
{
title: “创建时间”,
field: “createTime”,
templet: ‘
},
{title: “更新人员”, field: “updateUser”},
{
title: “更新时间”,
field: “updateTime”,
templet: ‘
},
{title: “操作”, templet: “#updateAndDelete”}
]],
done: function () {
layer.closeAll(‘loading’);
}
})
};
可以使用url传递数据，也可以使用data传递数据，如果使用url传递数据，参数是where字段，
跟layui数据表格的使用方式一致。
4，参数说明，（这里直接复制官方的）
layui数据表格的所有参数都可以用，除此之外treetable新增的参数有：
| 参数 | 类型 | 是否必填 | 描述 | |
| — | — | — | — | — |
| treeColIndex | int | 是 | 树形图标显示在第几列 | |
| treeSpid | object | 是 | 最上级的父级id | |
| treeIdName | string | 否 | id字段的名称 | |
| treePidName | string | 否 | pid字段的名称 | |
| treeDefaultClose | boolean | 否 | 是否默认折叠 | |
| treeLinkage | boolean | 否 | 父级展开时是否自动展开所有子级 | |
treeColIndex
树形图标（箭头和文件夹、文件的图标）显示在第几列， 索引值是cols数组的下标。
treeSpid
最上级的父级id，比如你可以规定pid为0或-1的是最顶级的目录。
treeIdName
treetable是以id和pid字段来渲染树形结构的，如果你的数据没有id和pid字段，你可以指定id和pid字段的名称。
treePidName
pid在你的数据字段中的名称。
treeDefaultClose
默认是全部展开的，如果需要默认全部关闭，加上treeDefaultClose:true即可。
treeLinkage
父级展开时是否自动展开所有子级
注意事项
-
不能使用分页功能，即使写了page:true，也会忽略该参数。
-
不能使用排序功能，不要开启排序功能。
-
table.reload()不能实现刷新，请参考demo的刷新。
-
除了文档上写的treetable.xxx的方法之外，其他数据表格的方法都使用table.xxx。
-
建议删除和修改请求完后台之后请刷新（重新渲染）表格，最好不要使用obj.delete方式删除。
5，其他方法
这里除了layui的方法新增的方法有展开所有，折叠所有，刷新表格 ，三种方法，使用方法如下：
全部展开
全部折叠
刷新表格
renderTable(); //这个就是上面的渲染表格 var renderTable = function () {…}
//展开所有
$(‘#btn-expand’).click(function () {
//alert(0)
treetable.expandAll(‘#Lay_category_treeTable’);
});
//折叠所有
$(‘#btn-fold’).click(function () {
// alert(1)
treetable.foldAll(‘#Lay_category_treeTable’);
});
//刷新表格
$(‘#btn-refresh’).click(function () {
renderTable();
});
6，content图标。
图标这个从gitee码云的源码上看吧，不再详细说，也没啥可说的。
我照着他给的教程一步步弄下来页面也显示出来了，但就是不能折叠，不管是我用折叠方法还是点那个三角图片还是设置为默认折叠，就是不管用，
不能折叠，可把我给气坏了。
苦思冥想找不到问题，最后我去研究treetable.js这个文件
发现其中有一段代码他给注释掉了，如下图所示：
然后我把注释的这一段代码打开，哎，好了，展开折叠正常了，不知道什么原因，不知道有没有其他人遇到过。。。
最后，分享一下我写的不成熟的这个页面的功能汇总，做个记录：
主要功能有，树形表格展示，添加，修改，删除，批量删除，搜索，layui时间日期自定义格式列，表格全部展开、折叠、刷新表格等功能，有兴趣的看下吧~~
效果图如下所示：
全部代码在这~：
<%–
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/9/23
Time: 13:25
To change this template use File | Settings | File Templates.
–%>
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<%@ include file=“…/meta.jsp” %>
批量删除
添加
<input type=“text” name=“search” id=“Lay_toSearch_input” placeholder=“请输入分类名称” autocomplete=“off”
class=“layui-input”>
<button type=“button” class=“layui-btn layui-btn-normal” id=“btn-search”<%-- οnclick=“doSearch()”–%>>
搜索
全部展开
全部折叠
刷新表格
<%–
随机更换小图标
–%>
<%–树形表格–%>
<%–树形菜单–%>
<%–Table表格–%>
<%--
<%–弹出层–%>
style=“padding: 20px 30px 0 0;display: none”>
<input type=“checkbox” lay-skin=“switch” lay-text=“启用|禁用” value=“1” checked name=“classIdStatus”
id=“classIdStatus” class=“layui-input”>
确认添加
确认修改
最后
小编这些年深知大多数初中级工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Java全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你需要这些资料，⬅专栏获取
});
}
function doMultiDelete() {
//获取到选中的内容的id===》table模块中找方法
layui.use([‘layer’, ‘table’], function () {
var table = layui.table;
var layer = layui.layer;
//获取到选中的数据
var checkStatus = table.checkStatus(‘Lay_back_table’); //idTest 即为基础参数 id 对应的值
// console.log(checkStatus.data);//获取选中行的数据
var data = checkStatus.data;
if (data.length == 0) {
layer.alert(“请选中要删除的数据”);
} else {
layer.confirm(“确定要删除选中的所有数据”, function (index) {
//把所有选中的数据的id封装到一个数组中
var ids = new Array(data.length);
for (var i = 0; i < ids.length; i++) {
ids[i] = data[i].id;
}
console.log(“ids===” + ids);
//执行删除操作
$.ajax({
url: “${pageContext.request.contextPath}/prefixThird/deleteMany”,
data: “ids=” + ids,
success: function (data) {
//删除确认框关闭掉
layer.close(index);
//删除提示
layer.alert(“删除” + data.msg+“，请点击右上角刷新表格后生效！”, {time: 2000});
//刷新table
// table.reload(“Lay_back_table”);
// renderTable();
}
})
});
}
});
}
最后
小编这些年深知大多数初中级工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Java全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-rkmffcTO-1719517510592)]
[外链图片转存中…(img-QyV2w7ur-1719517510593)]
[外链图片转存中…(img-H7zdUA2y-1719517510594)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你需要这些资料，⬅专栏获取
扫一扫
1764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
