HTML使⽤treeTable实现树形表格
⼀、前⾔
参考⽂章：
备注：这个⼤佬写得很全⾯，也有演⽰地址，不过是直接读取本地的json⽂本，我写这⽂章就是补充下后端动态的给前端传值，本⼈⼩⽩，第⼀次写，主要是为了做下笔记，有需要的朋友将就的看下。
先看下效果图：
备注：我是⽤springboot写的，所以后⾯的所有静态⽂件都是放在/static/下
⼆、前端部分
2.1 导⼊需要的包
下载地址：
<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
<link rel="stylesheet" href="/static/lib/layui/css/common.css"/>
<script type="text/javascript" src="/static/lib/layui/layui.js"></script>
备注：包地址根据⾃⼰情况修改，layui⽂件夹须整个复制
2.2 css修改图标
/** 箭头未展开 */
#table1 + .treeTable .treeTable-icon .layui-icon-triangle-d:before {
content: "\e602";
}
/** 箭头展开 */
#table1 + .treeTable .treeTable-icon.open .layui-icon-triangle-d:before {
content: "\e61a";
}
/** ⽂件图标 */
#table1 + .treeTable .treeTable-icon .layui-icon-file:before {
content: "";
}
/** ⽂件夹未展开（默认有图标我改为空了） */
#table1 + .treeTable .treeTable-icon .layui-icon-layer:before {
content: "";
}
/** ⽂件夹展开（默认有图标我改为空了） */
#table1 + .treeTable .treeTable-icon.open .layui-icon-layer:before {
content: "";
}
</style>
2.3 引⼊表格
<table id="table1" class="layui-table" lay-filter="table1"></table>
<!-- ⼯具条（编辑和删除按钮） -->
<script type="text/html" id="oper-col">
<button class="layui-btn layui-btn layui-btn-xs" lay-event="edit"  ><i class="layui-icon"></i>编辑</button>
<button class="layui-btn-danger layui-btn layui-btn-xs"  lay-event="del" ><i class="layui-icon"></i>删除</button> </script>
备注：复制需要的地⽅即可
2.4 将下载的module⽂件夹复制到你的项⽬中，然后在js中⽤模块加载的⽅式使⽤
base: '/static/module/'    /* 修改为你module⽂件夹地址*/
}).extend({
treetable: 'treetable-lay/treetable'layui下载
}).use(['table', 'treetable'], function () {
var $ = layui.jquery;
var table = layui.table;
var treetable = able;
// 渲染表格
var renderTable = function () {
layer.load(2);
size: 'lg', //尺⼨
treeColIndex: 0, //设置下拉箭头在第⼏列
treeSpid: "0",  //最上级的⽗级id
treeIdName: 'deptId', //id字段的名称(⾃⼰的id)
treePidName: 'parentId', //pid字段的名称（⽗亲的id）
treeDefaultClose: true, //是否默认折叠
treeLinkage: false, //⽗级展开时是否⾃动展开所有⼦级
elem: '#table1', //表格的id
url: '/getData', //数据请求地址，返回json格式数据（映射路径）
page: false,
cols: [  //列数和列名可根据需要更改
[
{field: 'name', width:"40%",align:'left' , title: '名称'}, //filed:json数据的key
{field: 'parName', align:'center', title: '上级部门'},
{field: 'orderNum',align:'center' , title: '排序'},
{toolbar: '#oper-col',align:'center', title: '操作'} //toolbar:⼯具条的id
]
],
done: function () {
layer.closeAll('loading');
}
});
};
renderTable();
//监听⼯具条
<('tool(table1)', function(obj){ //注：tool是⼯具条事件名，table1是table表格的属性 lay-filter="对应的值"            var data = obj.data; //获得当前⾏数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = ; //获得当前⾏ tr 的DOM对象
if(layEvent === 'del'){ //删除
obj.del(); //删除对应⾏（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
}
});
});
</script>
备注：具体参数使⽤可参考
三、后端部分
3.1 数据表
字段名描述
dept_id部门id
parent_id上级部门id（⽗亲id）
name部门名
order_num排序
备注：dept_id 、parent_id 类型必须为varchar
3.2 创建对应的部门实体类SysDept（对应属性名和get、set⽅法，这⾥就不展⽰了）
3.3 controller层设置映射路径，并返回json格式数据
@RestController
public class SysDeptController {
@Resource
SysDeptService sysDeptService;
//映射路径
@RequestMapping(value = "/getData")
public Map<String, Object> Test(){
Map<String, Object> map = new HashMap<>();
//查询所有部门表所有记录
List<SysDept> sysDeptList=sysDeptService.selectAll();
map.put("data", sysDeptList);
return map;
}
}
备注：
1. springboot⽤@RestController就⾏，SSM需要将@RestController改为@Controller，并在⽅法名上加 @ResponseBody
2.sql语句、dao层和service层就不写了，就是简单的查询所有记录和调⽤，没有其他的逻辑处理
3.4 返回数据格式：
{
"data": [
{
"deptId": "1",
"parentId": "0",
"name": "⼈⼈开源集团",
"orderNum": 0
},
{
"deptId": "5",
"parentId": "1",
"name": "上海分公司",
"orderNum": 0
},
{
"deptId": "12",
"parentId": "5",
"name": "市场部",
"orderNum": 0
},
{
"deptId": "16",
"parentId": "6",
"name": "技术部",
"orderNum": 0
},
{
"deptId": "6",
"parentId": "1",
"name": "北京分公司",
"orderNum": 1
},
{
"deptId": "13",
"parentId": "5",
"name": "销售部",
"orderNum": 1
},
{
"deptId": "14",
"parentId": "6",
"name": "财务部",
"orderNum": 1
}
]
}
备注：有疑问欢迎提问，有错误⿇烦帮忙指正

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。