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 樹形控件的子節點偽懶加載功能就已經完成了，實現真正的懶加載還是需要后台接口來配合。首先，我們這里一開始就加載全部數據，造成了數據資源浪費；其次，前端本不應該負責大數量的數據處理。