說明

zTree 是一個依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件“。

本文通過利用zTree API編寫了一個根據(jù)關(guān)鍵字進(jìn)行模糊搜索的demo。

整體思路：
1. 利用zTree顯示完整樹結(jié)構(gòu)；
2. 根據(jù)關(guān)鍵字，篩選出不包含關(guān)鍵字的葉子節(jié)點(diǎn)，并將這些不符合條件的葉子節(jié)點(diǎn)全部隱藏

主要代碼

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隱藏顯示結(jié)點(diǎn)需要此包支持 -->   
<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 頁面結(jié)構(gòu)

  <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一定要設(shè)置為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=[]; //用于存儲被隱藏的結(jié)點(diǎn)

//過濾ztree顯示數(shù)據(jù)
function filter(){
    //顯示上次搜索后背隱藏的結(jié)點(diǎn)
    zTreeObj.showNodes(hiddenNodes);

    //查找不符合條件的葉子節(jié)點(diǎn)
    function filterFunc(node){
        var _keywords=$("#keyword").val();
        if(node.isParent||node.name.indexOf(_keywords)!=-1) return false;
        return true;        
    };

    //獲取不符合條件的葉子結(jié)點(diǎn)
    hiddenNodes=zTreeObj.getNodesByFilter(filterFunc);

    //隱藏不符合條件的葉子結(jié)點(diǎn)
    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. 初始狀態(tài)
   
2. 搜索結(jié)果-1
   
3. 搜索結(jié)果-A
   

相關(guān)資源

1. demo下載：http://download.csdn.net/download/malingshuma/9590962
2. ztree官網(wǎng)：http://www./v3/main.php#_zTreeInfo