ZTree學習（二）：異步加載樹結構

一，使用場景

遇到這種大數據加載，特別的樹結構，而且是在彈出層中加載的，就會出現閃一下或者是卡主的情況，所以選擇異步加載。

 

二，異步加載使用關鍵，還是在setting參數上

var setting = {
        async:{
            autoParam:["parentId"],
            enable:true,
            type:"post",
            url:getUrl,
            dataFilter:filter,
        },
        check : {
            chkStyle: "radio",
            enable: false,
            chkboxType : { "Y" : "s", "N" : "ps" },
            radioType : "level"
        },
        view: {
            dblClickExpand: false,
            addDiyDom:addDiyDom
        },
        data : {
            key : {
                name : "unitName"
            },
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "parentId",
                rootPId : 0
            }
        },
        callback : {
            beforeAsync : ztreeBeforeAsync,
            onAsyncSuccess : ztreeOnAsyncSuccess,
            onClick:ztreeOnAsyncSuccess
        }
    };

 

最關鍵的部分就是async參數設置上的部分還有callback中onAsyncSuccess的設置上
autoParam：如果請求的url是帶參數的，此值就填寫參數名稱，當然如果是異步加載，這個是一定有，這個是一個數組來的，如果有多個參數，那么形式就是["1","2","3"]
enable:true, 表示是否使用異步加載，當然是true了。
type:"post",請求方式，是post還是get，一般都是post。
url:getUrl，這個url的值一定不可以寫"",一定要記住，記住，記住。當然想我這里寫一個方法，其實我這里是一個空方法。是可以的。
dataFilter:filter,這個參數非常重要。重要到哪里，我們一會兒單獨說。
onAsyncSuccess : ztreeOnAsyncSuccess,用於捕獲異步加載正常結束的事件回調函數，這個函數就是主要調用的函數。異步獲取需要的數據，然后加載上去就可以。

 

function ztreeOnAsyncSuccess(event, treeId, treeNode){
    var url = "unitAction!xzqhTree.action?parentId=";
    if(treeNode == undefined){
        url += "1";
    }
    else{
        url += treeNode.id;
    }
    $.ajax({
        type : "post",
        url : url,
        data : "",
        dataType : "json",
        async : true,
        success : function(jsonData) {
            if (jsonData != null) {
                var data = jsonData.unitList;
                if(data != null && data.length != 0){
                    if(treeNode == undefined){
                        treeObj.addNodes(null,data,true);// 如果是根節點，那么就在null后面加載數據
                    }
                    else{
                        treeObj.addNodes(treeNode,data,true);//如果是加載子節點，那么就是父節點下面加載
                    }
                }
                treeObj.expandNode(treeNode,true, false, false);// 將新獲取的子節點展開
            }
        },
        error : function() {
            alert("請求錯誤！");
        }
    });

};

 

 

就是一個簡單的ajax請求。
還有就是在JS的初始化中把樹結構初始化一下  $.fn.zTree.init($("#chooseXzqhTree"), setting);
到這里，一個簡單的異步加載就完成了。

 

 

三：遇到的問題

每次異步加載之后，老是會出現一個undefined節點，沒有緣由的出現，解決辦法是設定

dataFilter:filter,這個參數非常重要。重要到哪里，我們一會兒單獨說。
是的，沒有錯，就是設置了dataFilter，雖然filter方法中什么都沒有寫，但是這個問題確實是解決了。

 

給文章轉載自以下地址，並非本人心得：https://blog.csdn.net/u010951692/article/details/51833077