ztree根据关键字模糊搜索

html页面需要引入以下资源

 
<script type="text/javascript" src="jquery-1.4.4.min.js">script>

    
<script type="text/javascript" src="jquery.ztree.core-3.5.min.js">script>

   
<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">
            
            <ul id="ztreeObj" class="ztree">ul>
        div>
    div>

js核心代码

 对于一个结点，它是否需要显示，不仅仅只看它是否包含搜索关键字，还需要看它的父结点和子结点是否包含关键字，只有当父结点和子结点都不包含搜索关键字，该结点才需要隐藏

    /**
     * 查找子结点，如果找到，返回true，否则返回false
     */
    function searchChildren(keyword,children){
        if(children == null || children.length == 0){
            return false;
        }
        for(var i = 0;i < children.length;i++){
            var node = children[i];
            if(node.name.indexOf(keyword)!=-1){
                return true;
            }
            //递归查找子结点
            var result = searchChildren(keyword,node.children);
            if(result){
                return true;
            }
        }
        return false;
    }
    
    /**
     * 查找当前结点和父结点，如果找到，返回ture，否则返回false
     */
    function searchParent(keyword,node){
        if(node == null){
            return false;
        }
        if(node.name.indexOf(keyword)!=-1){
            return true;
        }
        //递归查找父结点
        return searchParent(keyword,node.getParentNode());
    }
    
    var hiddenNodes = [];
    $('#search').click(function(){
        var ztreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
        //显示上次搜索后隐藏的结点
        ztreeObj.showNodes(hiddenNodes);
        //查找不符合条件的结点
        //返回true表示要过滤，需要隐藏，返回false表示不需要过滤，不需要隐藏
        function filterFunc(node){
            var keyword=$("#keyword").val();
        //如果当前结点，或者其父结点可以找到，或者当前结点的子结点可以找到，则该结点不隐藏
            if(searchParent(keyword,node) || searchChildren(keyword,node.children)){
                return false;
            }
            return true;
        };

        //获取不符合条件的叶子结点
        hiddenNodes=ztreeObj.getNodesByFilter(filterFunc);

        //隐藏不符合条件的叶子结点
        ztreeObj.hideNodes(hiddenNodes);
    });

 

转载于:https://www.cnblogs.com/bsc2012/p/9241739.html