引入方法之类的在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样式有影响
解决方法:
<style>
.layui-table-view .layui-table {
width:100% !important;
}
</style>
将auto覆盖,使用百分比