1 到https://gitee.com/whvse/treetable-lay下载源码
2 把先运行demo，文件存放路径如下：
3. html代码主要修改两部分
<script>
layui.config({
base: '/static/plugins/treeGrid/module/' // 这个是module访问的相对路径 需要修改
}).extend({
treetable: 'treetable-lay/treetable'
}).use(['layer', 'table', 'treetable'], function () {
var $ = layui.jquery;
var table = layui.table;
var layer = layui.layer;
var treetable = layui.treetable;
var data_li = '';
// 渲染表格
var renderTable = function () {
layer.load(2);
treetable.render({
treeColIndex: 1, treeSpid: -1, treeIdName: 'id', treePidName: 'parent', treeDefaultClose: true, treeLinkage: false, elem: '#table1', url: '/static/plugins/treeGrid/json/data.json', // 这里是请求获取data.json文件路径，需要修改
page: false, cols: [[
{type: 'numbers'}, {field: 'name', title: 'name'}, {field: 'id', title: 'id'}, {field: 'sex', title: 'sex'}, {field: 'parent', title: 'parent'}, {
width: 100, title: '操作', align: 'center', templet: function (d) {
var html = '';
var addBtn = '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
var delBtn = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
return addBtn + delBtn;
}
}
]], parseData: function (res) { //res 即为原始返回的数据
console.log('parseData---》');
console.log(res);
}, done: function (res, curr, count) {
// res 可以获取文件的数据，或者是ajax请求的数据
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
layer.closeAll('loading');
}
});
};
renderTable();
$('#btn-expand').click(function () {
treetable.expandAll('#table1');
});
$('#btn-fold').click(function () {
treetable.foldAll('#table1');
});
$('#btn-refresh').click(function () {
renderTable();
});
//监听工具条
table.on('tool(table1)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'del') {
layer.msg('删除' + data.id);
} else if (layEvent === 'edit') {
layer.msg('修改' + data.id);
}
});
});
</script>
3.使用ajax获取数据，返回的数据格式，如果是初学者强烈建议按照以下格式数据返回
{'msg': 'ok', 'code': 0, 'count': 14, 'data':[{'id': 22, 'parent':-1, 'name': '注册公司'},{'id': 22, 'parent': 22, 'name': '公司注册'},]
4.如果使用ajax无法加载数据请参考：
使用layui 的treeTable插件无法加载ajax的数据解决办法
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。