以前設(shè)計(jì)模糊查詢的功能，一般都是針對(duì)表格來做的，還真沒考慮過對(duì)tree進(jìn)行模糊查詢，也可能是因?yàn)橛龅降臄?shù)據(jù)量還沒到頭疼的程度吧。為了完美的實(shí)現(xiàn)模糊查詢的效果，搞了半天css，對(duì)輸入框顯示效果的設(shè)置更是修改了n多次，什么半圓角、邊框、光影。。。真佩服我這顆屢試屢換的小心臟啊

一、頁(yè)面設(shè)計(jì)

        對(duì)于搜索功能，首先要有輸入框，用于接收輸入內(nèi)容；然后就是顯示搜索結(jié)果用的標(biāo)簽，控制焦點(diǎn)用的上移下動(dòng)按鈕。其實(shí)，也沒必要這么復(fù)雜，單純一個(gè)輸入款也ok的，但是這么簡(jiǎn)陋的搜索真的有點(diǎn)不太好。。。

[html] view plain copy

print?

1. <div class="col-md-3 sidebar">  
2.     <div class="row">  
3.         <div>  
4.             <input type="text"  id="key" class="empty form-control" placeholder="Search..." onkeyup="callNumber()">  
5.         </div>  
6.         <div>  
7.             <label type="text"  id="resultKey" class="form-control"onclick="changeFocus()" >  
8.                 <div>  
9.                     <a id="clickUp" class="glyphicon glyphicon-menu-up" onclick="clickUp()"></a>  
10.                     <a id="clickDown" class="glyphicon glyphicon-menu-down" onclick="clickDown()"></a>  
11.                 </div>  
12.                 <label id="number"></label>  
13.             </label>  
14.         </div>  
15.     </div>  
16.     <ul id="tree" class="ztree"></ul>  
17. </div>  

二、搜索結(jié)果的顯示

       關(guān)于搜索結(jié)果的顯示，剛開始考慮了兩種：只顯示結(jié)果，對(duì)于這種，當(dāng)有搜索結(jié)果時(shí)我們就看不到樹結(jié)構(gòu)了，沒有樹結(jié)構(gòu)則會(huì)顯得信息凌亂，所以放棄了這種方式；第二種是高亮所有搜索信息，如果搜索結(jié)果所在的父節(jié)點(diǎn)是關(guān)閉的，則自動(dòng)打開。

       在頁(yè)面加載時(shí)，給搜索框再綁定一些事件

[javascript] view plain copy

print?

1. $(document).ready(function(){  
2.     $.fn.zTree.init($("#tree"), setting, zNodes);  
3.     document.getElementById("key").value = ""; //清空搜索框中的內(nèi)容  
4.     //綁定事件  
5.     key = $("#key");  
6.     key.bind("focus", focusKey)  
7.         .bind("blur", blurKey)  
8.         .bind("propertychange", searchNode) //property(屬性)change(改變)的時(shí)候，觸發(fā)事件  
9.         .bind("input", searchNode);  
10. });  

[javascript] view plain copy

print?

1. var lastValue = "", nodeList = [], fontCss = {};  
2. //鍵盤釋放：當(dāng)輸入框的鍵盤按鍵被松開時(shí)，把查詢到的數(shù)據(jù)結(jié)果顯示在標(biāo)簽中  
3. function callNumber(){  
4.     var zTree = $.fn.zTree.getZTreeObj("tree");  
5.   
6.     //如果結(jié)果有值，則顯示比例；如果結(jié)果為0，則顯示"[0/0]"；如果結(jié)果為空，則清空標(biāo)簽框；  
7.     if(nodeList.length){  
8.         //讓結(jié)果集里邊的第一個(gè)獲取焦點(diǎn)（主要為了設(shè)置背景色），再把焦點(diǎn)返回給搜索框  
9.         zTree.selectNode(nodeList[0],false );  
10.         document.getElementById("key").focus();  
11.   
12.         clickCount=1; //防止重新輸入的搜索信息的時(shí)候，沒有清空上一次記錄  
13.   
14.         //顯示當(dāng)前所在的是第一條  
15.         document.getElementById("number").innerHTML="["+clickCount+"/"+nodeList.length+"]";  
16.   
17.     }else if(nodeList.length == 0){  
18.         document.getElementById("number").innerHTML="[0/0]";  
19.         zTree.cancelSelectedNode(); //取消焦點(diǎn)  
20.     }  
21.   
22.     //如果輸入框中沒有搜索內(nèi)容，則清空標(biāo)簽框  
23.     if(document.getElementById("key").value ==""){  
24.         document.getElementById("number").innerHTML="";  
25.         zTree.cancelSelectedNode();  
26.     }  
27. }  
28. function focusKey(e) {  
29.     if (key.hasClass("empty")) {  
30.         key.removeClass("empty");  
31.     }  
32. }  
33. function blurKey(e) {  
34.     if (key.get(0).value === "") {  
35.         key.addClass("empty");  
36.     }  
37. }  
38. //搜索節(jié)點(diǎn)  
39. function searchNode(e) {  
40.     var zTree = $.fn.zTree.getZTreeObj("tree");  
41.     var value = $.trim(key.get(0).value);  
42.     var keyType = "name";  
43.   
44.     if (key.hasClass("empty")) {  
45.         value = "";  
46.     }  
47.     if (lastValue === value) return;  
48.     lastValue = value;  
49.     if (value === ""){  
50.         updateNodes(false);  
51.         return;  
52.     };  
53.     nodeList = zTree.getNodesByParamFuzzy(keyType, value); //調(diào)用ztree的模糊查詢功能，得到符合條件的節(jié)點(diǎn)  
54.     updateNodes(true); //更新節(jié)點(diǎn)  
55. }  

[javascript] view plain copy

print?

1. //高亮顯示被搜索到的節(jié)點(diǎn)  
2. function updateNodes(highlight) {  
3.     var zTree = $.fn.zTree.getZTreeObj("tree");  
4.     for( var i=0, l=nodeList.length; i<l; i++) {  
5.         nodeList[i].highlight = highlight; //高亮顯示搜索到的節(jié)點(diǎn)(highlight是自己設(shè)置的一個(gè)屬性)  
6.         zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //將搜索到的節(jié)點(diǎn)的父節(jié)點(diǎn)展開  
7.         zTree.updateNode(nodeList[i]); //更新節(jié)點(diǎn)數(shù)據(jù)，主要用于該節(jié)點(diǎn)顯示屬性的更新  
8.     }  
9. }  

[javascript] view plain copy

print?

1. //設(shè)置顏色  
2. function getFontCss(treeId, treeNode) {  
3.     return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};  
4. }  

三、上下移動(dòng)按鈕

       在樹結(jié)構(gòu)較大，且搜索數(shù)量過多時(shí)，單純的高亮搜索結(jié)果就不太能滿足我們的要求了，所以這里提供了上下移動(dòng)按鈕，且提供標(biāo)簽框來動(dòng)態(tài)的顯示搜索結(jié)果的數(shù)據(jù)

[javascript] view plain copy

print?

1. //點(diǎn)擊向上按鈕時(shí)，將焦點(diǎn)移向上一條數(shù)據(jù)  
2. function clickUp(){  
3.     var zTree = $.fn.zTree.getZTreeObj("tree");  
4.     //如果焦點(diǎn)已經(jīng)移動(dòng)到了最后一條數(shù)據(jù)上，就返回第一條重新開始，否則繼續(xù)移動(dòng)到下一條  
5.     if(nodeList.length==0){  
6.         alert("沒有搜索結(jié)果！");  
7.         return ;  
8.     }else if(clickCount==1) {  
9.         alert("您已位于第一條記錄上！");  
10.         return;  
11.         //讓結(jié)果集里邊的下一個(gè)節(jié)點(diǎn)獲取焦點(diǎn)（主要為了設(shè)置背景色），再把焦點(diǎn)返回給搜索框  
12.         //zTree.selectNode(nodeList[clickCount], false)  
13.     }else{  
14.         //讓結(jié)果集里邊的第一個(gè)獲取焦點(diǎn)（主要為了設(shè)置背景色），再把焦點(diǎn)返回給搜索框  
15.         zTree.selectNode(nodeList[clickCount], false);  
16.         clickCount --;  
17.     }  
18.     document.getElementById("key").focus();  
19.     //顯示當(dāng)前所在的是條數(shù)  
20.     document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";  
21. }  
22. //點(diǎn)擊向上按鈕時(shí)，將焦點(diǎn)移向下一條數(shù)據(jù)  
23. function clickDown(){  
24.     var zTree = $.fn.zTree.getZTreeObj("tree");  
25.     //如果焦點(diǎn)已經(jīng)移動(dòng)到了最后一條數(shù)據(jù)上，則提示用戶（或者返回第一條重新開始），否則繼續(xù)移動(dòng)到下一條  
26.     if(nodeList.length==0){  
27.         alert("沒有搜索結(jié)果！");  
28.         return ;  
29.     }else if(nodeList.length==clickCount)  
30.     {  
31.         alert("您已位于最后一條記錄上！")  
32.         return;  
33.     }else{  
34.         //讓結(jié)果集里邊的第一個(gè)獲取焦點(diǎn)（主要為了設(shè)置背景色），再把焦點(diǎn)返回給搜索框  
35.         zTree.selectNode(nodeList[clickCount], false)  
36.         clickCount ++;  
37.     }  
38.     document.getElementById("key").focus();  
39.     //顯示當(dāng)前所在的條數(shù)  
40.     document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";  
41. }  

        當(dāng)搜索“巴”時(shí)，自動(dòng)展開節(jié)點(diǎn)，默認(rèn)第一個(gè)搜索結(jié)果呈選中狀態(tài)；點(diǎn)擊上下移動(dòng)按鈕時(shí)，樹上的焦點(diǎn)自動(dòng)更換，顯示搜索條數(shù)比例的標(biāo)簽框中的內(nèi)容也自動(dòng)更換。當(dāng)沒有搜索結(jié)果時(shí)，顯示的搜索條數(shù)比例為[0/0]；當(dāng)輸入框?yàn)榭諘r(shí)，顯示搜索條數(shù)比例的標(biāo)簽框自動(dòng)清空。

小結(jié)：

        對(duì)頁(yè)面上數(shù)據(jù)的查詢有很多種，現(xiàn)在最常用的就是模糊查詢，原理都差不多，所以上邊只選擇了這種，用ztree自帶的模糊查詢就可以實(shí)現(xiàn)了。這里主要做的優(yōu)化是針對(duì)搜索結(jié)果的顯示效果，以及對(duì)開始執(zhí)行搜索操作的觸發(fā)事件的調(diào)整。