LayUi 樹形組件tree 實現懶加載模式，展開父節點時異步加載子節點數據

LayUi框架中樹形組件tree官方還在持續完善中，目前最新版本爲v2.5.5

官方樹形組件目前還不支持懶加載方式，我本身修改了下最新源碼tree.js，簡單粗暴的方式支持懶加載模式。（Ps：最新更新2019-11-4 14:22:35）

個人解決方案以下：

一、官方樹形組件，默認當子節點無數據時不顯示展開圖標和操做，這裏經過註釋如下代碼，子節點children: []  spread: false 時，顯示+號，能夠點擊展開動做。

 

 二、封裝spread事件，當展開時觸發回調，返回參數中包含data：當前節點數據，state：值爲false子節點無數據，elem：當前節點元素，下面代碼修改中，發現原有變量a衝突，因此替換爲aa。（已修復手風琴模式下子節點沒法隱藏問題）

 

三、上面修改後展開操做事件有了，下一步就是怎麼樣去充填子節點數據？我這裏最終的方案是利用tree.reload(id,data)方法，將本地數據中找到當前索引節點位置，

經過懶加載方式獲取子節點數據充填原有數據當中，最終調用reload方法重載組件。（更新遞歸全部子節點，計算當前全部節點展開狀態）

 

 

說明：function (e, i, d) 參數e爲 tree實例惟一索引id；參數i=obj.data.id 當前展開節點id；參數d爲異步獲取的子節點數據[]。

調用例子：

layui.use('tree', function () {
        var tree = layui.tree;

        //渲染
        var inst1 = tree.render({
            elem: '#treelist'
            , id: 'treelist'
            , showCheckbox: !1 //複選框
            , showLine: !0  //鏈接線
            , accordion: !1 //手風琴模式
            , onlyIconControl: !1 //左側圖標控制展開收縮
            , isJump: !1  //彈出新窗口跳轉
            , edit: !1 //開啓節點的操做
            , data: [{
                id: '144115188075855872'
                , title: '哈爾濱市第三中學'
                , spread: true
                , children: [{
                    id: '144396663052566528'
                    , title: '2016級學生'
                    , children: [{
                        id: '144397762564194304'
                        , title: '2016級一班'
                    }, {
                        id: '144398862075822080'
                        , title: '2016級二班'
                    }, {
                        id: '144399961587449856'
                        , title: '2016級三班'
                    }]
                }]
            }, {
                id: '144678138029277184'
                , title: '教職工'
                , spread: false
                , children: []
            }]
            , text: {
                defaultNodeName: '無數據'
                , none: '加載數據失敗！'
            }
            , click: function (obj) {
                console.log(obj.data); //獲得當前點擊的節點數據
                // console.log(obj.state); //獲得當前節點的展開狀態：open、close、normal
                // console.log(obj.elem); //獲得當前節點元素
                // console.log(obj.data.children); //當前節點下是否有子節點
            }
            , oncheck: function (obj) {
                console.log(obj.data); //獲得當前點擊的節點數據
                console.log(obj.checked); //獲得當前節點的展開狀態：open、close、normal
                console.log(obj.elem); //獲得當前節點元素
            }
            , spread: function (obj) {
                if (!obj.state) {
                    // 懶加載子節點，異步獲取data數據 這裏根據obj.data.id像後臺請求當前節點數據
                    // 這裏模擬3層用IF判斷來測試，實際不須要
                    if (obj.data.id === '144678138029277184') { //第二層節點數據
                        tree.children(inst1.config.id, obj.data.id, [{
                            id: '101'
                            , title: '子節點1'
                        }, {
                            id: '102'
                            , title: '子節點2'
                            , spread: false
                            , children: []
                        }]);
                    }
                    if(obj.data.id === '102'){ //第三層節點數據
                        tree.children(inst1.config.id, obj.data.id, [{
                            id: '10201'
                            , title: '子節點3'
                        }, {
                            id: '10202'
                            , title: '子節點4'
                            , spread: false
                            , children: []
                        }]);
                    }
                    if(obj.data.id === '10202'){ //第四層節點數據
                        tree.children(inst1.config.id, obj.data.id, [{
                            id: '1020201'
                            , title: '子節點5'
                        }, {
                            id: '1020202'
                            , title: '子節點6'
                        }]);
                    }
                }
                // console.log(obj.data);
                // console.log(obj.state);
                // console.log(obj.elem);
            }
        });
    });

 

 

 

tree.js 下載地址在回覆區可見。（layui-v2.5.5版本替換tree.js可用）