ztree实现模糊查询作用多级节点

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>

猜你喜欢

转载自blog.csdn.net/zyj_princess/article/details/81207026