easyui-tree/combotree 子节点前端懒加载（主要解决ie11下加载慢

场景

最近在项目开发上遇到了easyui-comboxtree （下拉树）在IE11下加载缓慢、导致页面卡顿的情况，对比分析了一下发现，树的数据量越大页面加载就越缓慢。由于数据是一次性塞到组件上的，把大量树形数据递归转换成树形dom再渲染到页面上，必然会导致页面的性能问题。因此选择使用子节点懒加载方式解决。

官方文档里采用的懒加载方式是通过 url 属性和后台服务配合实现的，我看不懂而且也没有现成的接口可以用，只有一个接口能一次性拿到所有数据，基于目前的条件只能做一个伪懒加载，但至少可以解决ie11下的加载问题。

树形数据结构

var treeData = [
    {
        id: '1',
        parentId: '0',
        text: '兰州新区',
        state: 'closed',
        children: [
            {
                id: '11',
                parentId: '1',
                text: '秦川园区',
                state: 'closed',
                children: [
                    {
                        id: '111',
                        parentId: '2',
                        text: '新昌村',
                        state: 'closed',
                        children: []
                    }
                ]
            }, {
                id: '12',
                parentId: '1',
                text: '中川园区',
                state: 'closed',
                children: [] 
            }
        ]
    }
]

递归树查询（根据id查询节点下的子节点数据

//data-树形数据 id-要查询的节点
function findTreeChildNodes(data, id){
    if(data.id == id) return data.children
    for(var i =0; i < data.children.length; i++){ //ie11不支持es6 支持的环境可以用of语法遍历 
        var res = findTreeChildNodes(data.children[i], id)
        if(res) return res
    }
}

easyui-combotree/tree 的配置

var rootNode = JSON.parse(JSON.stringify(treeData))
rootNode.children = []//初始化只渲染根节点数据
$('#cb-tree').combotree({
    data: rootNode,
    onBeforeExpand: function(node){
        if(node.isLoaded) return
        var childs = findTreeChildNodes(treeData[0], node.id)
        childs.map(function(){
            if(e.children.length){
                e.children = []//清空获取的子节点数据下的孙子节点 否则会把子级全部加载出来 如果数据量大 会造成卡顿
                e.state = 'closed'
            }
        })
        var tree = $('#cb-tree').combotree('tree')//如果是tree组件 使用$('x').tree()即可
        tree.tree('append', {
            parent: node.target,
            data: childs
        })
        //标记此节点已经加载过数据
        tree.tree('update', {
            target: node.target,
            isLoaded: true
        })
    }
})
    

到这里 easyui 树形控件的子节点伪懒加载功能就已经完成了，实现真正的懒加载还是需要后台接口来配合。首先，我们这里一开始就加载全部数据，造成了数据资源浪费；其次，前端本不应该负责大数量的数据处理。