ZTree異步加載時查詢節點

ZTree的異步加載大大提高了頁面的加載速度。

但是，異步加載樹時，ZTree的自帶的模糊查詢方法（getNodesByParamFuzzy）可就不那麼實用了；
它的查詢範圍僅限於當前頁面已經加載出來的節點，而不能搜索還未加載出來的節點。

---

相信大家在使用ZTree的過程中也遇到了這個問題，
在此我將我的解決方法分享出來，供大家參考：

1、初始異步加載樹，如下圖：

以下是樹的初始化的代碼：

<!--HTML-->
<input type="text" id="searchInput">
<botton id="search">查詢</button>
<ul id="tree" class="ztree"></ul>

//JQuery
var setting = {
     view:{
         showLine: true,
         selectedMulti: false,  
     },
     data: {    
        key:{name:'name',title:"code"},
        simpleData: {
            enable:true,
            idKey: "id",
            pIdKey: "parent_id",
            rootPId: Globals.Prop.treeRoot
        }
      }, 
      async: {
        enable: true,
        autoParam: ["id","type","schemadiff"],//異步加載參數（即向後臺傳送節點的這三個屬性值）
        url:URL,
        dataFilter:  function(treeId, parentNode, data) {
            if (!data.treeLi) return null;
            return data.treeLi;
        }
       },
       callback: {
         onAsyncSuccess:zTreeOnAsyncSuccess,//樹加載成功時的回調函數
       }
};
//初始化樹
$.fn.zTree.init($("#tree"), setting);
/**
* 加載成功的回調函數 
* 樹第一次加載成功則強制異步加載子節點
* 展開其下面的子節點
*/
function zTreeOnAsyncSuccess(){
    var treeObj =  $.fn.zTree.getZTreeObj("tree");

    //獲取父節點爲ROOT的節點，若節點沒有加載子節點，則強制加載子節點
    var rootNodes = treeObj.getNodesByParam("parent_id", "ROOT", null);

    //循環判斷該節點是否已加載子節點，是則進入下一次循環，否則加載子節點，確保加載子節點只加載一次，若加載多次會影響效率
    for(var i=0; i<rootNodes.length; i++){
        if(rootNodes[i].zAsync == false)
            treeObj.reAsyncChildNodes(rootNodes[i], "refresh",true);    
        else continue;
    }//end for
}//end func

2、異步搜索樹的葉子節點，如下圖：

（注：在傢俱節點下的子節點前有複選框，那是因爲功能需要）

搜索代碼如下：

$("#search").unbind("click").click(function(){
    var value = $("#searchInput").val();
    var treeObj = $.fn.zTree.getZTreeObj("tree");
    if( $.trim(value) == ""){
        //顯示所有隱藏節點
        var hides = treeObj.getNodesByParam("isHidden", true);
        treeObj.showNodes(hides);
        treeObj.expandAll(false);//摺疊所有節點
        return;
    }//end if

    //隱藏所有節點
    var all = treeObj.transformToArray(treeObj.getNodes());
    for (var i = 0; i < all.length; i++) {
        treeObj.hideNode(all[i]);
    }

    //查找節點
    var nodes = treeObj.getNodesByParamFuzzy("name", $.trim(value), null);
    for (var i = 0; i < nodes.length; i++) {
        treeObj.showNode(nodes[i]);//顯示查到節點
        treeObj.showNode(nodes[i].getParentNode());//顯示其父節點
        treeObj.expandAll(true);//展開所有查詢到的內容
    }
})

---

以上即爲我在解決時的處理方法，異步搜索的問題完全解決，也不會影響頁面的加載速度；
如果大家想要了解更多關於ZTree的方法可以去官網查看[ZTree API]