zoukankan      html  css  js  c++  java
  • ztree根据关键字模糊搜索

    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核心代码

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

        /**
         * 查找子结点,如果找到,返回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);
        });
  • 相关阅读:
    ApacheCN JavaScript 译文集 20211122 更新
    ApacheCN jQuery 译文集 20211121 更新
    ApacheCN 大数据译文集(二) 20211206 更新
    我这里一直空荡荡的,还占着博客园的位置,真是不好意思
    2009年最后一天
    学习petshop的朋友。这里有一些讲坐下载
    Repeater控件中如何做编辑和删除功能
    可以让你少奋斗十年的工作经验
    GridView自定义分页,模仿GridView的自动分页功能
    从内容面访问母版页中的控件或属性
  • 原文地址:https://www.cnblogs.com/bsc2012/p/9241739.html
Copyright © 2011-2022 走看看