layui懒加载树形表格
最近在使用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);
})
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通