扩展jquery easyui tree的搜索树节点方法

1. /**  
2.  * 1）扩展jquery easyui tree的节点检索方法。使用方法如下：  
3.  * $("#treeId").tree("search", searchText);    
4.  * 其中，treeId为easyui tree的根UL元素的ID，searchText为检索的文本。  
5.  * 如果searchText为空或""，将恢复展示所有节点为正常状态  
6.  */  
7. (function($) {    
8.       
9.     $.extend($.fn.tree.methods, {  
10.         /**  
11.          * 扩展easyui tree的搜索方法  
12.          * @param tree easyui tree的根DOM节点(UL节点)的jQuery对象  
13.          * @param searchText 检索的文本  
14.          * @param this-context easyui tree的tree对象  
15.          */  
16.         search: function(jqTree, searchText) {  
17.             //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法  
18.             var tree = this;  
19.               
20.             //获取所有的树节点  
21.             var nodeList = getAllNodes(jqTree, tree);  
22.               
23.             //如果没有搜索条件，则展示所有树节点  
24.             searchText = $.trim(searchText);  
25.             if (searchText == "") {  
26.                 for (var i=0; i<nodeList.length; i++) {  
27.                     $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");  
28.                     $(nodeList[i].target).show();  
29.                 }  
30.                 //展开已选择的节点（如果之前选择了）  
31.                 var selectedNode = tree.getSelected(jqTree);  
32.                 if (selectedNode) {  
33.                     tree.expandTo(jqTree, selectedNode.target);  
34.                 }  
35.                 return;  
36.             }  
37.               
38.             //搜索匹配的节点并高亮显示  
39.             var matchedNodeList = [];  
40.             if (nodeList && nodeList.length>0) {  
41.                 var node = null;  
42.                 for (var i=0; i<nodeList.length; i++) {  
43.                     node = nodeList[i];  
44.                     if (isMatch(searchText, node.text)) {  
45.                         matchedNodeList.push(node);  
46.                     }  
47.                 }  
48.                   
49.                 //隐藏所有节点  
50.                 for (var i=0; i<nodeList.length; i++) {  
51.                     $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");  
52.                     $(nodeList[i].target).hide();  
53.                 }             
54.                   
55.                 //折叠所有节点  
56.                 tree.collapseAll(jqTree);  
57.                   
58.                 //展示所有匹配的节点以及父节点              
59.                 for (var i=0; i<matchedNodeList.length; i++) {  
60.                     showMatchedNode(jqTree, tree, matchedNodeList[i]);  
61.                 }  
62.             }      
63.         },  
64.           
65.         /**  
66.          * 展示节点的子节点（子节点有可能在搜索的过程中被隐藏了）  
67.          * @param node easyui tree节点  
68.          */  
69.         showChildren: function(jqTree, node) {  
70.             //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法  
71.             var tree = this;  
72.               
73.             //展示子节点  
74.             if (!tree.isLeaf(jqTree, node.target)) {  
75.                 var children = tree.getChildren(jqTree, node.target);  
76.                 if (children && children.length>0) {  
77.                     for (var i=0; i<children.length; i++) {  
78.                         if ($(children[i].target).is(":hidden")) {  
79.                             $(children[i].target).show();  
80.                         }  
81.                     }  
82.                 }  
83.             }     
84.         },  
85.           
86.         /**  
87.          * 将滚动条滚动到指定的节点位置，使该节点可见（如果有滚动条才滚动，没有滚动条就不滚动）  
88.          * @param param {  
89.          *    treeContainer: easyui tree的容器（即存在滚动条的树容器）。如果为null，则取easyui tree的根UL节点的父节点。  
90.          *    targetNode:  将要滚动到的easyui tree节点。如果targetNode为空，则默认滚动到当前已选中的节点，如果没有选中的节点，则不滚动  
91.          * }   
92.          */  
93.         scrollTo: function(jqTree, param) {  
94.             //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法  
95.             var tree = this;  
96.               
97.             //如果node为空，则获取当前选中的node  
98.             var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);  
99.               
100.             if (targetNode != null) {  
101.                 //判断节点是否在可视区域                 
102.                 var root = tree.getRoot(jqTree);  
103.                 var $targetNode = $(targetNode.target);  
104.                 var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();  
105.                 var containerH = container.height();  
106.                 var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;  
107.                 if (nodeOffsetHeight > (containerH - 30)) {  
108.                     var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;  
109.                     container.scrollTop(scrollHeight);  
110.                 }                             
111.             }  
112.         }  
113.     });  
114.       
115.       
116.       
117.       
118.     /**  
119.      * 展示搜索匹配的节点  
120.      */  
121.     function showMatchedNode(jqTree, tree, node) {  
122.         //展示所有父节点  
123.         $(node.target).show();  
124.         $(".tree-title", node.target).addClass("tree-node-targeted");  
125.         var pNode = node;  
126.         while ((pNode = tree.getParent(jqTree, pNode.target))) {  
127.             $(pNode.target).show();               
128.         }  
129.         //展开到该节点  
130.         tree.expandTo(jqTree, node.target);  
131.         //如果是非叶子节点，需折叠该节点的所有子节点  
132.         if (!tree.isLeaf(jqTree, node.target)) {  
133.             tree.collapse(jqTree, node.target);  
134.         }  
135.     }      
136.       
137.     /**  
138.      * 判断searchText是否与targetText匹配  
139.      * @param searchText 检索的文本  
140.      * @param targetText 目标文本  
141.      * @return true-检索的文本与目标文本匹配；否则为false.  
142.      */  
143.     function isMatch(searchText, targetText) {  
144.         return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1;  
145.     }  
146.       
147.     /**  
148.      * 获取easyui tree的所有node节点  
149.      */  
150.     function getAllNodes(jqTree, tree) {  
151.         var allNodeList = jqTree.data("allNodeList");  
152.         if (!allNodeList) {  
153.             var roots = tree.getRoots(jqTree);  
154.             allNodeList = getChildNodeList(jqTree, tree, roots);  
155.             jqTree.data("allNodeList", allNodeList);  
156.         }  
157.         return allNodeList;  
158.     }  
159.       
160.     /**  
161.      * 定义获取easyui tree的子节点的递归算法  
162.      */  
163.     function getChildNodeList(jqTree, tree, nodes) {  
164.         var childNodeList = [];  
165.         if (nodes && nodes.length>0) {             
166.             var node = null;  
167.             for (var i=0; i<nodes.length; i++) {  
168.                 node = nodes[i];  
169.                 childNodeList.push(node);  
170.                 if (!tree.isLeaf(jqTree, node.target)) {  
171.                     var children = tree.getChildren(jqTree, node.target);  
172.                     childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));  
173.                 }  
174.             }  
175.         }  
176.         return childNodeList;  
177.     }  
178. })(jQuery);