ztree根据关键字模糊搜索

说明

zTree 是一个依靠 jQuery 实现的多功能 “树插件“。

本文通过利用zTree API编写了一个根据关键字进行模糊搜索的demo。

整体思路：
1. 利用zTree显示完整树结构；
2. 根据关键字，筛选出不包含关键字的叶子节点，并将这些不符合条件的叶子节点全部隐藏

主要代码

1. 页面部分

1. html页面需要引入以下资源

<!-- jquery包，ztree依赖jquery --> 
<script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script>

<!-- ztree核心包，ztree核心功能 -->    
<script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script>

<!-- ztree exhide包，ztree隐藏显示结点需要此包支持 -->   
<script type="text/javascript" src="ztree/js/jquery.ztree.exhide-3.5.min.js"></script>
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

2. html 页面结构

  <div class="container">
        <div class="search-bar">
            <input id="keyword" type="text" placeholder="请输入...">
            <button id="search-bt">搜索</button>
        </div>
        <div class="content">
            <!-- 用于显示ztree的html元素的class一定要设置为ztree-->
            <ul id="tree-obj" class="ztree"></ul>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

2. JS代码

下面只给出用于模糊搜索的核心代码，完整的代码下载。

var hiddenNodes=[]; //用于存储被隐藏的结点

//过滤ztree显示数据
function filter(){
    //显示上次搜索后背隐藏的结点
    zTreeObj.showNodes(hiddenNodes);

    //查找不符合条件的叶子节点
    function filterFunc(node){
        var _keywords=$("#keyword").val();
        if(node.isParent||node.name.indexOf(_keywords)!=-1) return false;
        return true;        
    };

    //获取不符合条件的叶子结点
    hiddenNodes=zTreeObj.getNodesByFilter(filterFunc);

    //隐藏不符合条件的叶子结点
    zTreeObj.hideNodes(hiddenNodes);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Demo截图

1. 初始状态
   
2. 搜索结果-1
   
3. 搜索结果-A
   

相关资源

1. demo下载：http://download.csdn.net/download/malingshuma/9590962
2. ztree官网：http://www./v3/main.php#_zTreeInfo