html代码:
<div class="container">
<div class="search-bar">
<input id="keyword" type="text" placeholder="请输入...">
<a href="javascript:queryData();" >搜索</a>
</div>
<div class="content">
<!-- 用于显示ztree的html元素的class一定要设置为ztree-->
<ul id="treeDemo" class="ztree"></ul>
</div>
js 代码:
<link rel="stylesheet" href="<%=basePath%>js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!--<script type="text/javascript" src="<%=basePath%>js/zTree_v3/js/jquery-1.4.4.min.js"></script>-->
<script type="text/javascript" src="<%=basePath%>js/zTree_v3/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<!-- <script type="text/javascript" src="<%=basePath%>js/zTree_v3/js/jquery.ztree.exhide-3.5.js"></script> -->
<script type="text/javascript" src="<%=basePath%>js/zTree_v3/js/jquery.ztree.exhide-3.5.min.js"></script>
<script type="text/javascript">
var setting = {
check: {
enable: true,
chkStyle: "radio", //单选框
radioType: "all" //对所有节点设置单选
},
data: {
simpleData: {
enable: true
}
}
};
function setTitle(node) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = node ? [node]:zTree.transformToArray(zTree.getNodes());
for (var i=0, l=nodes.length; i<l; i++) {
var n = nodes[i];
n.title = "[" + n.id + "] isFirstNode = " + n.isFirstNode + ", isLastNode = " + n.isLastNode;
zTree.updateNode(n);
}
}
var zNodes=${fileSecTree};
for (var int = 0; int < zNodes.length; int++) {
//delete zNodes[int].checked ;
//delete zNodes[int].nocheck ;
//delete zNodes[int].icon ;
//delete zNodes[int].open;
//delete zNodes[int].isParent;
//zNodes[int].icon = zNodes[int].iconSkin
//delete zNodes[int].code;
zNodes[int].icon = zNodes[int].iconSkin;
delete zNodes[int].iconSkin;
}
var zTreeObj="";
$(document).ready(function(){
zTreeObj=$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setTitle();
});
var hiddenNodes=[];
var hiddenNodesFinal=[];
function queryData(){
var shownNodes=[];
var parentNodesSet=new Set();
//显示上次搜索后被隐藏的结点
zTreeObj.showNodes(hiddenNodesFinal);
//查找不符合条件的叶子节点
function filter(node){
var _keywords=$("#keyword").val();
if(node.name.indexOf(_keywords)!=-1){
shownNodes.push(node);
return false;
}
return true;
};
//获取不符合条件的叶子结点
hiddenNodes=zTreeObj.getNodesByFilter(filter);
//放到父节点集合中
for(var i=0;i<shownNodes.length;i++){
addParentNodes(shownNodes[i]);
}
//递归找出所有父节点放到集合中
function addParentNodes(node){
if(node!=null){
var parentNode=node.getParentNode();
if(parentNode!=null){
console.log("parentNode:"+parentNode);
parentNodesSet.add(parentNode);
addParentNodes(parentNode);
}
}else{
return;
}
}
//隐藏节点与父节点求差集找出最终应该隐藏的节点
var a=new Set(hiddenNodes);
var b=parentNodesSet;
var differenceABSet = new Set([...a].filter(x => !b.has(x)));
//集合转数组
hiddenNodesFinal = Array.from(differenceABSet);
//隐藏不符合条件的叶子结点
zTreeObj.hideNodes(hiddenNodesFinal);
}
</script>