最近在使用layui做懒加载的树形表格 , 所以分享下demo
使用最新的3.0稳定版 , 修复了许多小问题
gitee地址:https://gitee.com/ele-admin/treetable-lay
下载地址:https://gitee.com/ele-admin/treetable-lay/releases/tag/3.0
文档地址:https://gitee.com/ele-admin/treetable-lay/wikis/
下面是自己写的懒加载的demo,亲测可以使用,可以参考下
点击查看代码
// 自定义模块，这里只需要开放soulTable即可
layui.config({
base: '/common/layui_exts/', // 第三方模块所在目录
}).extend({
treeTable: 'treetable-lay/treeTable'
}).use(['table', 'upload', 'laydate', 'treeTable'], function () {
//定义名称
let pojoName = 'skyshopmember';
let requestPath = ctx + '/mycode/' + pojoName;
var $ = layui.jquery;
var treeTable = layui.treeTable;
let tableInit = {
elem: '#' + pojoName,
tree: {
iconIndex: 1, // 折叠图标显示在第几列
idName: 'id', // 自定义id字段的名称
pidName: 'netParentId', // 自定义标识是否还有子节点的字段名称
},
cols: [
{type: 'checkbox'}
//, {field: 'id',hide:true, width: 50, title: 'ID', sort: true}
, {field: 'id', hide: false, title: '自增ID', singleLine: false}
// ...
, {field: 'paymentMethod', hide: false, title: '提现方式'}
],
reqData: function (data, callback) {
var pid = data ? data.id : 160952;
var children = data ? (data.children ? data.children : null) : null;
if (children && children.length > 0) {
return callback(children);
}
$.get(requestPath + '/chaId?netParentId=' + JSON.stringify(pid), function (res) {
let data1 = res.data;
$.each(data1, function (index, item) {
if (item.parentLineStr == "true") {
item.haveChild = true;
}
})
callback(data1);
})
}
, height: 'full-99'
}
// 渲染表格
var insTb = treeTable.render(tableInit);
})