工作需要，所以做了一个比较方便的搜索功能；
1、功能实现都是基于zTree的API；
2、如有更好的建议，欢迎拍我；
其中要说明下的是flag 这个字段， 这是我自己定义的扩展字段，代码中涉及到flag 请先了解zTree哦
1 /** 2 * 展开树 3 * @param treeId 4 */ 5 function expand_ztree(treeId){ 6 var treeObj = $.fn.zTree.getZTreeObj(treeId); 7 treeObj.expandAll(true); 8 } 9 10 /** 11 * 收起树：只展开根节点下的一级节点 12 * @param treeId 13 */ 14 function close_ztree(treeId){ 15 var treeObj = $.fn.zTree.getZTreeObj(treeId); 16 var nodes = treeObj.transformToArray(treeObj.getNodes()); 17 var nodeLength = nodes.length; 18 for (var i = 0; i < nodeLength; i++) { 19 if (nodes[i].id == '0') { 20 //根节点：展开 21 treeObj.expandNode(nodes[i], true, true, false); 22 } else { 23 //非根节点：收起 24 treeObj.expandNode(nodes[i], false, true, false); 25 } 26 } 27 } 28 29 /** 30 * 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】 31 * @param treeId 32 * @param searchConditionId 文本框的id 33 */ 34 function search_ztree(treeId, searchConditionId){ 35 searchByFlag_ztree(treeId, searchConditionId, ""); 36 } 37 38 /** 39 * 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】 40 * @param treeId 41 * @param searchConditionId 搜索条件Id 42 * @param flag 需要高亮显示的节点标识 43 */ 44 function searchByFlag_ztree(treeId, searchConditionId, flag){ 45 //<1>.搜索条件 46 var searchCondition = $('#' + searchConditionId).val(); 47 //<2>.得到模糊匹配搜索条件的节点数组集合 48 var highlightNodes = new Array(); 49 if (searchCondition != "") { 50 var treeObj = $.fn.zTree.getZTreeObj(treeId); 51 highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null); 52 } 53 //<3>.高亮显示并展示【指定节点s】 54 highlightAndExpand_ztree(treeId, highlightNodes, flag); 55 } 56 57 /** 58 * 高亮显示并展示【指定节点s】 59 * @param treeId 60 * @param highlightNodes 需要高亮显示的节点数组 61 * @param flag 需要高亮显示的节点标识 62 */ 63 function highlightAndExpand_ztree(treeId, highlightNodes, flag){ 64 var treeObj = $.fn.zTree.getZTreeObj(treeId); 65 //<1>. 先把全部节点更新为普通样式 66 var treeNodes = treeObj.transformToArray(treeObj.getNodes()); 67 for (var i = 0; i < treeNodes.length; i++) { 68 treeNodes[i].highlight = false; 69 treeObj.updateNode(treeNodes[i]); 70 } 71 //<2>.收起树, 只展开根节点下的一级节点 72 close_ztree(treeId); 73 //<3>.把指定节点的样式更新为高亮显示，并展开 74 if (highlightNodes != null) { 75 for (var i = 0; i < highlightNodes.length; i++) { 76 if (flag != null && flag != "") { 77 if (highlightNodes[i].flag == flag) { 78 //高亮显示节点，并展开 79 highlightNodes[i].highlight = true; 80 treeObj.updateNode(highlightNodes[i]); 81 //高亮显示节点的父节点的父节点....直到根节点，并展示 82 var parentNode = highlightNodes[i].getParentNode(); 83 var parentNodes = getParentNodes_ztree(treeId, parentNode); 84 treeObj.expandNode(parentNodes, true, false, true); 85 treeObj.expandNode(parentNode, true, false, true); 86 } 87 } else { 88 //高亮显示节点，并展开 89 highlightNodes[i].highlight = true; 90 treeObj.updateNode(highlightNodes[i]); 91 //高亮显示节点的父节点的父节点....直到根节点，并展示 92 var parentNode = highlightNodes[i].getParentNode(); 93 var parentNodes = getParentNodes_ztree(treeId, parentNode); 94 treeObj.expandNode(parentNodes, true, false, true); 95 treeObj.expandNode(parentNode, true, false, true); 96 } 97 } 98 } 99 } 100 101 /** 102 * 递归得到指定节点的父节点的父节点....直到根节点 103 */ 104 function getParentNodes_ztree(treeId, node){ 105 if (node != null) { 106 var treeObj = $.fn.zTree.getZTreeObj(treeId); 107 var parentNode = node.getParentNode(); 108 return getParentNodes_ztree(treeId, parentNode); 109 } else { 110 return node; 111 } 112 } 113 114 /** 115 * 设置树节点字体样式 116 */ 117 function setFontCss_ztree(treeId, treeNode) { 118 if (treeNode.id == 0) { 119 //根节点 120 return {color:"#333", "font-weight":"bold"}; 121 } else if (treeNode.isParent == false){ 122 //叶子节点 123 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"}; 124 } else { 125 //父节点 126 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; 127 } 128 } 129 130 //==============HTML============== 131 <!--搜索框--> 132 <div class="padd" style="padding-bottom: 0px;"> 133 <div class="input-append row-fluid" style="margin-bottom: 0px;"> 134 <input id="search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/> 135 <button type="button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索</button> 136 </div> 137 </div> 138 <!--树--> 139 <ul id="dep_tree" class="ztree"></ul>
本文转载自：http://www.oschina.net/code/snippet_565465_33862
ps：ztree模糊搜索的demo，节点标红
http://www.ztree.me/v3/demo/cn/core/searchNodes.html
主要有一下设置，一开始找不到为什么没标红，看了好久。。。比较笨
1 var setting = { 2 view: { 3 fontCss: getFontCss 4 } 5 }; 6 7 function getFontCss(treeId, treeNode) { 8 return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; 9 }
