1. 程式人生 > >ZTree非同步載入時查詢節點

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]