【ztree系列】树节点的模糊查询

       以前设计模糊查询的功能，一般都是针对表格来做的，还真没考虑过对tree进行模糊查询，也可能是因为遇到的数据量还没到头疼的程度吧。为了完美的实现模糊查询的效果，搞了半天css，对输入框显示效果的设置更是修改了n多次，什么半圆角、边框、光影。。。真佩服我这颗屡试屡换的小心脏啊

一、页面设计

        对于搜索功能，首先要有输入框，用于接收输入内容；然后就是显示搜索结果用的标签，控制焦点用的上移下动按钮。其实，也没必要这么复杂，单纯一个输入款也ok的，但是这么简陋的搜索真的有点不太好。。。

[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>  

二、搜索结果的显示

       关于搜索结果的显示，刚开始考虑了两种：只显示结果，对于这种，当有搜索结果时我们就看不到树结构了，没有树结构则会显得信息凌乱，所以放弃了这种方式；第二种是高亮所有搜索信息，如果搜索结果所在的父节点是关闭的，则自动打开。

       在页面加载时，给搜索框再绑定一些事件

[javascript] view plain copy

print?

1. $(document).ready(function(){  
2.     $.fn.zTree.init($("#tree"), setting, zNodes);  
3.     document.getElementById("key").value = ""; //清空搜索框中的内容  
4.     //绑定事件  
5.     key = $("#key");  
6.     key.bind("focus", focusKey)  
7.         .bind("blur", blurKey)  
8.         .bind("propertychange", searchNode) //property(属性)change(改变)的时候，触发事件  
9.         .bind("input", searchNode);  
10. });  

       为了让搜索功能使用起来更省事，我把真正对树执行搜索功能的操作放在了搜索框的“键盘释放”事件上，在这里用了ztree的一个函数来得到搜索的结果，并赋给一个数组变量

[javascript] view plain copy

print?

1. var lastValue = "", nodeList = [], fontCss = {};  
2. //键盘释放：当输入框的键盘按键被松开时，把查询到的数据结果显示在标签中  
3. function callNumber(){  
4.     var zTree = $.fn.zTree.getZTreeObj("tree");  
5.   
6.     //如果结果有值，则显示比例；如果结果为0，则显示"[0/0]"；如果结果为空，则清空标签框；  
7.     if(nodeList.length){  
8.         //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框  
9.         zTree.selectNode(nodeList[0],false );  
10.         document.getElementById("key").focus();  
11.   
12.         clickCount=1; //防止重新输入的搜索信息的时候，没有清空上一次记录  
13.   
14.         //显示当前所在的是第一条  
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(); //取消焦点  
20.     }  
21.   
22.     //如果输入框中没有搜索内容，则清空标签框  
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. //搜索节点  
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); //调用ztree的模糊查询功能，得到符合条件的节点  
54.     updateNodes(true); //更新节点  
55. }  

       获得搜索的节点信息后，再对ztree执行更新操作，即修改搜索结果中节点的文字样式

[javascript] view plain copy

print?

1. //高亮显示被搜索到的节点  
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; //高亮显示搜索到的节点(highlight是自己设置的一个属性)  
6.         zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //将搜索到的节点的父节点展开  
7.         zTree.updateNode(nodeList[i]); //更新节点数据，主要用于该节点显示属性的更新  
8.     }  
9. }  

       修改文字样式，主要调用的是ztree的ztree.setting.view.fontCss所定义的函数来实现，想换用其它颜色的修改这个函数就行了，主要用了一个三目运算

[javascript] view plain copy

print?

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

三、上下移动按钮

       在树结构较大，且搜索数量过多时，单纯的高亮搜索结果就不太能满足我们的要求了，所以这里提供了上下移动按钮，且提供标签框来动态的显示搜索结果的数据

[javascript] view plain copy

print?

1. //点击向上按钮时，将焦点移向上一条数据  
2. function clickUp(){  
3.     var zTree = $.fn.zTree.getZTreeObj("tree");  
4.     //如果焦点已经移动到了最后一条数据上，就返回第一条重新开始，否则继续移动到下一条  
5.     if(nodeList.length==0){  
6.         alert("没有搜索结果！");  
7.         return ;  
8.     }else if(clickCount==1) {  
9.         alert("您已位于第一条记录上！");  
10.         return;  
11.         //让结果集里边的下一个节点获取焦点（主要为了设置背景色），再把焦点返回给搜索框  
12.         //zTree.selectNode(nodeList[clickCount], false)  
13.     }else{  
14.         //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框  
15.         zTree.selectNode(nodeList[clickCount], false);  
16.         clickCount --;  
17.     }  
18.     document.getElementById("key").focus();  
19.     //显示当前所在的是条数  
20.     document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";  
21. }  
22. //点击向上按钮时，将焦点移向下一条数据  
23. function clickDown(){  
24.     var zTree = $.fn.zTree.getZTreeObj("tree");  
25.     //如果焦点已经移动到了最后一条数据上，则提示用户（或者返回第一条重新开始），否则继续移动到下一条  
26.     if(nodeList.length==0){  
27.         alert("没有搜索结果！");  
28.         return ;  
29.     }else if(nodeList.length==clickCount)  
30.     {  
31.         alert("您已位于最后一条记录上！")  
32.         return;  
33.     }else{  
34.         //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框  
35.         zTree.selectNode(nodeList[clickCount], false)  
36.         clickCount ++;  
37.     }  
38.     document.getElementById("key").focus();  
39.     //显示当前所在的条数  
40.     document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";  
41. }  

        当搜索“巴”时，自动展开节点，默认第一个搜索结果呈选中状态；点击上下移动按钮时，树上的焦点自动更换，显示搜索条数比例的标签框中的内容也自动更换。当没有搜索结果时，显示的搜索条数比例为[0/0]；当输入框为空时，显示搜索条数比例的标签框自动清空。

       

小结：

        对页面上数据的查询有很多种，现在最常用的就是模糊查询，原理都差不多，所以上边只选择了这种，用ztree自带的模糊查询就可以实现了。这里主要做的优化是针对搜索结果的显示效果，以及对开始执行搜索操作的触发事件的调整。