eltree懒加载详解

一、eltree懒加载的基本概念

eltree是一种基于jQuery的树形控件，它支持异步加载，自适应宽度，多选框等功能。eltree的懒加载功能是指将树形控件的数据分批加载，一次只加载几个节点，而不是一次性加载所有节点。

懒加载的好处是可以提高网页性能和用户体验，减少网络请求时间，加快网页的加载速度。这对于大型数据量的树形结构来说是非常有用的，用户可以先看到最常用的几个节点，然后再按需加载其他节点。

二、懒加载的实现方式

eltree懒加载的基本实现方式是通过回调函数来实现的，当用户展开一个尚未加载的节点时，eltree会调用一个用户定义的回调函数，在这个函数中向服务器请求该节点的子节点数据。回调函数需要返回一个json对象，包含当前节点的子节点数据。以下是一个简单的懒加载回调函数的示例：

$(document).ready(function(){
    $('#tree').tree({
        onBeforeExpand: function(node){
            if(node.children==undefined){
                var url="get_children_data.php?id="+node.id;
                $.getJSON(url,function(data){
                    $('#tree').tree('append',{
                        parent: node.target,
                        data: data
                    });
                });
            }
        }
    });
});

在这个示例中，我们定义了onBeforeExpand回调函数来处理节点展开事件。首先判断当前节点的子节点是否已经加载过，如果没有加载过，向服务器发送ajax请求，获取该节点的子节点数据，并使用tree(‘append’)方法将子节点添加到树形结构中。

需要注意的是，这个回调函数的返回值必须是一个json对象，其中必须包含一个data属性，这个属性是一个数组，包含当前节点的所有子节点数据。

三、懒加载的性能优化

懒加载的性能优化是eltree懒加载中的重要问题，如果不进行优化，可能会导致页面卡顿、响应缓慢等问题。以下是一些常见的懒加载性能优化方法：

1、分批加载

为了减少网络请求时间，可以将节点数据分批加载。例如：每次只加载10个节点，用户向下滚动到一定位置时，再继续加载下一个10个节点。这种方法可以有效减少服务器压力和网络请求时间。

2、缓存数据

为了减少重复的网络请求，可以将已经加载的节点数据存储到本地缓存中，下次需要加载相同节点时，可以直接从本地缓存中获取数据。这种方法可以有效减少服务器压力和网络请求时间。

3、合并网络请求

为了减少网络请求的数量，可以将多个请求合并成一个请求，从而减少网络请求的数量和请求时间。例如：将多个节点的请求合并到同一个ajax请求中，这样可以大大减少网络请求时间。

四、实例代码

下面给出一个完整的eltree懒加载实例代码，这个例子实现了分批加载、数据缓存和网络请求合并等优化方法，可以供用户参考和学习。

$(document).ready(function(){
    $('#tree').tree({
        onBeforeExpand: function(node){
            if(node.children==undefined){
                var url="get_children_data.php?id="+node.id;
                $.getJSON(url,function(data){
                    // 缓存数据
                    node.children=data;
                    // 分批加载
                    var isLast=isLastNode(node);
                    var children=data.slice(0,10);
                    $('#tree').tree('append',{
                        parent: node.target,
                        data: children
                    });
                    if(!isLast){
                        // 延时加载下一批数据
                        setTimeout(function(){
                            $('#tree').tree('append',{
                                parent: node.target,
                                data: data.slice(10,20)
                            });
                        },500);
                    }
                });
            }else{
                // 从缓存中获取数据
                var isLast=isLastNode(node);
                var data=node.children;
                var children=node.children.slice(0,10);
                $('#tree').tree('append',{
                    parent: node.target,
                    data: children
                });
                if(!isLast){
                    // 延时加载下一批数据
                    setTimeout(function(){
                        $('#tree').tree('append',{
                            parent: node.target,
                            data: data.slice(10,20)
                        });
                    },500);
                }
            }
        }
    });

    // 判断节点是否是当前层级的最后一个节点
    function isLastNode(node){
        var parent=$('#tree').tree('getParent',node.target);
        var len=parent.children.length;
        var index=0;
        for(var i=0;i<len;i++){
            if(parent.children[i].id==node.id){
                index=i;
                break;
            }
        }
        return index==len-1;
    }
});