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);  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM