EleTree组件异步加载实现

最新推荐文章于 2024-04-24 09:47:28 发布

酸梅解渴

最新推荐文章于 2024-04-24 09:47:28 发布

阅读量2.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： java web js layui

本文链接：https://blog.youkuaiyun.com/weixin_43340087/article/details/99697870

java 同时被 3 个专栏收录

7 篇文章

订阅专栏

web

4 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细介绍了如何使用EleTree组件实现异步加载功能，包括配置参数、事件监听及AJAX请求处理，通过实例展示了如何动态加载节点数据，适用于需要高效管理大量层级数据的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EleTree组件异步加载实现

div id="test1" lay-filter="data1"></div>

<script>
layui.config({
    base: "/static/layuiadmin/modules/"
	}).use('eleTree', function(){
    var $ = layui.$;        
    var eleTree = layui.eleTree;        
    var el;        
    var rootId=0;                
    //渲染        
    el=eleTree.render({                    
        elem: '#test1'                    
        ,url:"/item/cat/list/"+rootId                    
        ,type:'get'                    
        ,id: 'demoId1'                    
        ,showLine:true                    
        ,showCheckbox: true        
    });        
    // 节点点击事件        
    eleTree.on("nodeClick(data1)",function(d) {            
        $.ajax({                
            url:"/item/cat/list/"+d.data.currentData.id,                
            type:'get',                
            success:function (result) {                    
                var nodes = result.data;                    
                for(var i=0;i<nodes.length;i++){                        
                    var node=JSON.parse(JSON.stringify(nodes[i]));//不加这个会出现找不到ID属性的问题?                        
                    el.append(d.data.currentData.id,node);                    }                    //测试数据                    
                // {                    
                //     id: 1,                    
                //         label: "安徽省",                    
                //     children: []                    
                // }                    
                // console.log(d.data);    
                // 点击节点对应的数据                    
                // console.log(d.event);   
                // event对象                    
                // console.log(d.node);    
                // 点击的dom节点                    
                // console.log(this);      // 与d.node相同                
            }            
        });        
    })    
});
</script>

优化版

el=eleTree.render({
                    elem: '#test1'
                    ,url:"/content/find/"+rootId
                    ,type:'get'
                    ,id: 'demoId1'
                    ,lazy: true
                    ,showLine:true
                    ,accordion:false
                    ,checkStrictly: true
                    ,highlightCurrent:true
                    ,defaultExpandAll: true
                    ,contextmenuList: ["add.async","edit","remove"]
                    ,load:function (oldNode,callback) {
                $.ajax({
                    url: "/content/find/" + oldNode.id,
                    type: 'get',
                    success: function (result) {
                        var newNode = result.data;
                        setTimeout(function () {
                            callback(newNode);
                        }, 100);
                    }
                });
            }
        });