html页面需要引入以下资源
<!-- jquery包,ztree依赖jquery -->
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<!-- ztree核心包,ztree核心功能 -->
<script type="text/javascript" src="jquery.ztree.core-3.5.min.js"></script>
<!-- ztree exhide包,ztree隐藏显示结点需要此包支持 -->
<script type="text/javascript" src="jquery.ztree.exhide-3.5.min.js"></script>
html页面结构
<div class="container">
<div class="search-bar">
<input id="keyword" type="text" placeholder="请输入...">
<button id="search">搜索</button>
</div>
<div class="content">
<!-- 用于显示ztree的html元素的class一定要设置为ztree-->
<ul id="ztreeObj" class="ztree"></ul>
</div>
</div>
js核心代码
对于一个结点,它是否需要显示,不仅仅只看它是否包含搜索关键字,还需要看它的父结点和子结点是否包含关键字,只有当父结点和子结点都不包含搜索关键字,该结点才需要隐藏。
/**
* 查找子结点,如果匹配模糊查询的关键字则返回false,否则返回true
*/
function searchChildren(pNode,keyword){
var childs=pNode.children;
var isexit=true;
for(var i = 0;i < childs.length;i++){
if(childs[i].isParent){
isexit=searchChildren(childs[i]);
if(!isexit){
retrun isexit;
}
}else{
if(node.name.indexOf(keyword)!=-1){
return false;
}
}
}
return isexit;
}
//查找不符合条件的结点
//返回true表示需要隐藏,返回false表示不需要隐藏 。
function filterFunc(node){
var keyword=$("#keyword").val();
//如果当前结点或其子节点匹配模糊查询的关键字,则该结点不隐藏
if(node.name.indexOf(keyword)!=-1){
return false;
}
if(node.isParent){
var b=searchChildren(node,keyword);
return b;
}
return true;
}
var hiddenNodes = [];
$('#search').click(function(){
var ztreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
var keyword=$("#keyword").val();
//显示上次搜索后隐藏的结点,注意:使用hideNodes()方法时需要引包jquery.ztree.exhide-3.5.min.js
ztreeObj.showNodes(hiddenNodes);
//获取不符合条件的子父结点
hiddenNodes=ztreeObj.getNodesByFilter(filterFunc);
//隐藏不符合条件的子父结点,注意:使用hideNodes()方法时需要引包jquery.ztree.exhide-3.5.min.js
ztreeObj.hideNodes(hiddenNodes);
//判断ztree显示时是否需要展开。
if(keyword == null || keyword == ""){
return;
}else{
ztreeObj.expandAll(ztreeObj);
}
});
//jquery.ztree.exhide-3.5.min.js插件的下载地址:
//https://download.csdn.net/download/weixin_41477980/10847414