ZTree非同步載入時查詢節點
阿新 • • 發佈:2019-02-15
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]