前言
引入方法在github有详细介绍,附上github地址: https://gitee.com/whvse/treetable-lay
1.HTML部分
<table id="table1" class="layui-table" lay-filter="table1"></table>
2.设置为post请求方式,并带请求头token
// 1.写一个ajax 将url放在ajax里面
// 2.在ajax设置请求头 请求方式
// 3.在成功回调执行 渲染表格方法 带入一个参数 也就是返回的data
// 4.渲染表格render方法里面 data:data 带入数据给表格
$.ajax({
url: 'https://easy-mock.com/mock/5c131015dada7b27ac3a5c36/titi/ceshi',
headers: {
"token": 'dsohaonoagnoangonaog'
},
type: 'post',
dataType: 'json',
success: function(res) {
renderTable(res.data);
}
})
// 渲染表格
var renderTable = function(data) {
layer.load(2);
treetable.render({
data: data,
treeColIndex: 2, // 树形图标显示在第几列
treeSpid: -1, // 最上级的父级id
treeIdName: 'id', // id字段的名称
treePidName: 'pid', // pid字段的名称
treeDefaultClose: true, // 是否默认折叠
treeLinkage: false, // 父级展开时是否自动展开所有子级
elem: '#table1', // 表格id
page: false, // 树形表格一般是没有分页的
cols: [[
{ type: 'radio' },
{ field: 'bumenid', title: '部门ID' },
{ field: 'bumenname', title: '部门名称' },
{ field: 'sex', title: '上级部门' },
{ field: 'sortnum', title: '排序号' }
]],
done: function() {
layer.closeAll('loading');
}
});
}
附上效果图
3.遇到的问题
将代码全部复制到项目之后,表格初始化没有自适应
原因是layui.css的table样式有影响
解决方法:
将auto覆盖,使用百分比
<style>
.layui-table-view .layui-table {
width: 100% !important;
}
</style>
如果本篇文章对你有帮助的话,很高兴能够帮助上你。
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。