layui懒加载树形表格

时间:2022-09-23
本文章向大家介绍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);

})

原文地址:https://www.cnblogs.com/andie/p/sunday_layui_lanjiazai_shuxingtu_tabletree.html