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);

})
posted @   sunday-fir  阅读(673)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示