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