ztree插件怎么实现搜索

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>12345678

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>12345678910

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)

}

a). 树形图隐藏所有不匹配的节点

b). 节点名称中匹配部分高亮

a). html部分

b). js部分

c). 模拟数据部分

a). ztree根据关键字模糊搜索

b). 我也来实现ztree模糊搜索功能

---