zTree树的模糊搜索

Posted 2020-07-01 我是一杯果汁

工作需要，所以做了一个比较方便的搜索功能；
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         }