這篇文章主要為大家展示了“jQuery中zTree搜索的示例分析”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery中zTree搜索的示例分析”這篇文章吧。
創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的鄲城網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
思維導(dǎo)圖
一般搜索功能只是在“既定范圍內(nèi)(方便稱呼)”匹配關(guān)鍵字,“既定范圍”即我們已經(jīng)知道搜索的范圍:比如說一個文本庫,一個下拉框,換而言之我們匹配的對象集大小已經(jīng)確定了。然而這一點在ztree上不可行,為什么呢?在我考慮了一下ztree搜索功能實現(xiàn)邏輯的時候問了一句:那啥,這棵樹的層級是固定的嗎?還是說不確定有多少層?老哥看著我會心一笑:你按無限層來寫~小生小腿肚子一抽。。因為樹的層級不確定,所以搜索范圍不確定,舉個栗子:目標(biāo)節(jié)點匹配成功,如果這個節(jié)點是子節(jié)點,那么它的父節(jié)點也應(yīng)該是顯示的,然后它父節(jié)點的父節(jié)點也應(yīng)該是顯示的,然后它父節(jié)點的父節(jié)點的父節(jié)點的...Orz...這仿佛永遠(yuǎn)寫不到盡頭了...沒辦法,只能:遞歸,找到目標(biāo)節(jié)點的所有父節(jié)點和子節(jié)點。
邏輯關(guān)鍵點
在上面的思維導(dǎo)圖中我大致列出了邏輯,目標(biāo)節(jié)點在什么情況下顯示,什么情況下隱藏,這是我們必須清楚的關(guān)鍵點,下面我們具體看下目標(biāo)節(jié)點存在的情況:
到了這里,相信對于如何實現(xiàn)滿足我們需求的搜索功能開發(fā),已經(jīng)能做到了然于心了,剩下的只是實現(xiàn)的方法,然而這完全不是事~(小生竊以為真正讓人憂心的理不清功能的流程,至于實現(xiàn)方法你們都懂的吧?0.0..)
關(guān)于樹節(jié)點
要完成上述流程中各種方法,我們需要知道樹節(jié)點的一系列屬性,我們都知道有api這種神器,然而api有一個特點就是齊全(齊全得我們想精確的找到某一個屬性或者方法時可能得一頓好找),這里我們想要的是如何快速得到自己想要的屬性或者方法,我們在控制臺打印出樹節(jié)點集合:
var treeObj=$.fn.zTree.getZTreeObj("homeTree"); // 設(shè)置根節(jié)點 var node = treeObj.getNodes(); // 獲取根節(jié)點 var nodes = treeObj.transformToArray(node); // 獲取所有節(jié)點 console.log(nodes);
看圖:我們能看到所有節(jié)點,其中有id,name等各種屬性
再看圖:我們能看到任意節(jié)點的各種屬性,有我們想要的子節(jié)點集合 childern,父節(jié)點屬性 isParent ,節(jié)點id tId,父節(jié)點id parentTid...
萬事俱備,動手
下面看一下相關(guān)方法,很多小細(xì)節(jié)需要在真正編碼過程中才能發(fā)現(xiàn),這里為了方便展示就直接列舉方法了。
聲明備用數(shù)組:
// 地區(qū)搜索 var parentArray = []; var childArray = [];
遞歸獲取目標(biāo)節(jié)點父節(jié)點集合:
// 遞歸獲取目標(biāo)節(jié)點所有父節(jié)點 function getParentsNode(treeNode){ var thisParentNode = treeNode.getParentNode(); //得到該節(jié)點的父節(jié)點 if( thisParentNode != null ){ // 父節(jié)點存在 parentArray.push(thisParentNode); // 儲存至數(shù)組 getParentsNode(thisParentNode); // 重調(diào) }else{ return false; } }
遞歸獲取目標(biāo)節(jié)點子節(jié)點集合:
// 遞歸獲取目標(biāo)節(jié)點所有子節(jié)點 function getChildrenNode(treeNode){ var thisIsParent = treeNode.isParent; // 獲取目標(biāo)節(jié)點 isParent 屬性,判斷是否為父節(jié)點 if( thisIsParent == true ){ var thisChildrenNode = treeNode.children; // 得到該節(jié)點的子節(jié)點集合 for(var i=0;i<thisChildrenNode.length;i++){ childArray.push(thisChildrenNode[i]); // 將該子節(jié)點加入數(shù)組中 getChildrenNode(thisChildrenNode[i]); // 重調(diào) } }else{ return false; } }
這里建議將匹配節(jié)點部分摘出來單獨寫一個方法,方便進(jìn)行拓展匹配規(guī)則,這里我們假設(shè)除了匹配name還需要匹配節(jié)點的 entity_code 屬性:
//匹配節(jié)點 function matchNode(treeNode,num){ var inputArea = $("input[name='searchArea']"); var name = treeNode.name; var entityCode = treeNode.entity_code|| ''; var val = inputArea.val(); // 獲取檢索值 var numName = name.indexOf(val); var numCode = entityCode.indexOf(val); var num = -1; if( numName != -1 || numCode !=-1 ){ num = 1; } if( numName == -1 && numCode == -1 ){ num = -1; } return num; }
節(jié)點匹配成功方法:
// 節(jié)點匹配成功 function checkTrueArray(arr,treeNode){ var thisTid = treeNode.tId; var thisLi = $("#"+thisTid); for(var n=0;n<arr.length;n++){ var thisNodeId = arr[n].tId; var thisNodeLi = $("#"+thisNodeId); thisLi.show(); thisNodeLi.show(); } }
節(jié)點匹配失敗方法:
// 節(jié)點匹配失敗 function checkFalseArray(arr,treeNode){ var result = []; var result2 = []; var thisTid = treeNode.tId; var thisLi = $("#"+thisTid); var val = inputArea.val(); // 獲取檢索值 var thisParent = treeNode.getParentNode(); // 獲取目標(biāo)節(jié)點父節(jié)點 if( thisParent != null ){ // 有父節(jié)點 var thisBrotherArr = treeNode.getParentNode().children; // 得到包含自身的兄弟數(shù)組 for(var m=0;m<arr.length;m++){ // 匹配父節(jié)點 var num = matchNode(arr[m]); if( num != -1 ){ result.push(arr[m]); } } var resultLength = result.length; for( var m=0;m<thisBrotherArr.length;m++ ){ // 匹配兄弟節(jié)點 var num = matchNode(thisBrotherArr[m]); if( num != -1 ){ result2.push(thisBrotherArr[m]); } } var resultLength3 = result2.length; // 對于自身匹配失敗的節(jié)點,要顯示必須滿足有父節(jié)點匹配成功,且兄弟級節(jié)點都匹配失敗 if( (resultLength == 0 && resultLength3 == 0) || resultLength3 != 0 ){ thisLi.hide(); } if( resultLength !=0 && resultLength3 == 0 ){ thisLi.show(); } }else{ thisLi.hide(); } }
目標(biāo)節(jié)點匹配失敗 目標(biāo)節(jié)點即有父節(jié)點又有子節(jié)點:
// 目標(biāo)節(jié)點匹配失敗 目標(biāo)節(jié)點即有父節(jié)點又有子節(jié)點 function checkAllArray(arr,arr2,treeNode){ var result = []; var result2 = []; var thisTid = treeNode.tId; var thisLi = $("#"+thisTid); var val = inputArea.val(); // 獲取檢索值 for(var m=0;m<arr.length;m++){ // 匹配子節(jié)點或父節(jié)點 var num = matchNode(arr[m]); if( num != -1 ){ result.push(arr[m]); // 匹配成功儲存至數(shù)組 } } var resultLength = result.length; // 獲取匹配成功后返回的數(shù)組長度 for(var m=0;m<arr2.length;m++){ // 匹配子節(jié)點或父節(jié)點 var num = matchNode(arr2[m]); if( num != -1 ){ result2.push(arr2[m]); // 匹配成功儲存至數(shù)組 } } var resultLength3 = result2.length; // 獲取匹配成功后返回的數(shù)組長度 if( resultLength == 0 && resultLength3 == 0 ){ // 子節(jié)點和父節(jié)點都匹配失敗 thisLi.hide(); }else{ thisLi.show(); // 有一種匹配成功或都匹配成功 } }
定義搜索方法:
function searchArea(treeId, treeNode){ // 定義搜索方法 var inputArea = $("input[name='searchArea']"); var val = inputArea.val(); // 獲取檢索值 var treeObj=$.fn.zTree.getZTreeObj("homeTree"); // 設(shè)置根節(jié)點 var node = treeObj.getNodes(); // 獲取根節(jié)點 var nodes = treeObj.transformToArray(node); // 獲取所有節(jié)點 console.log(nodes); for(var i=0;i<nodes.length;i++){ var thisNodePid = nodes[i].pId; var thisParentNode = parentArray = []; childArray = []; getParentsNode(nodes[i]); // 獲取目標(biāo)節(jié)點所有父節(jié)點 返回數(shù)組 getChildrenNode(nodes[i]); // 獲取目標(biāo)節(jié)點所有子節(jié)點 返回數(shù)組 var num = matchNode(nodes[i]); if( nodes[i].isParent == false ){ if( num != -1 ){ checkTrueArray(parentArray,nodes[i]); }else{ checkFalseArray(parentArray,nodes[i]); } } if( nodes[i].isParent == true ){ if( num != -1 ){ checkTrueArray(parentArray,nodes[i]); checkTrueArray(childArray,nodes[i]); }else{ checkAllArray(parentArray,childArray,nodes[i]); } } } }
調(diào)用搜索方法:
// 調(diào)用搜索方法 $(".searchAreaBtn").click(function(treeId, treeNode){ searchArea(treeId, treeNode); }); var inputArea = $("input[name='searchArea']"); inputArea.keyup(function(treeId, treeNode,e){ var e = event || window.event; var val = inputArea.val(); if( e.keyCode == 13 || val == "" ){ searchArea(treeId, treeNode); } });
看效果(電腦ps出問題了,用美圖秀秀拼的圖~囧...):
以上是“jQuery中zTree搜索的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章名稱:jQuery中zTree搜索的示例分析
瀏覽地址:http://bm7419.com/article34/ijhgse.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)、App開發(fā)、軟件開發(fā)、域名注冊
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)