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);
});

ztree根据关键字模糊搜索的更多相关文章

  1. zTree树的模糊搜索

    工作需要,所以做了一个比较方便的搜索功能:1.功能实现都是基于zTree的API:2.如有更好的建议,欢迎拍我:其中要说明下的是flag 这个字段, 这是我自己定义的扩展字段,代码中涉及到flag 请 ...

  2. ztree树的模糊搜索功能

    在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择 具体实现过程如下 ...

  3. ztree 树的模糊搜索

    (转载),有个坑记录下: (原文)实现类似下面这种: /** * 展开树 * @param treeId */ function expand_ztree(treeId) { var treeObj ...

  4. 百度地图API 关键字模糊搜索

    http://api.map.baidu.com/place/v2/search?q=广场&region=汕头&output=json&ak=5E56A48675a5cd09a ...

  5. [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

  6. salesforce中soql及sosl的伪‘Like’模糊检索

    salesforce里有soql.sosl两种查询语法,soql针对模糊搜索也有‘like’关键字,然而只能针对其自带字段如:Name.Id:对于自定义添加的字段如:Message__c.Note__ ...

  7. DirBuster工具扫描敏感文件

    DirBuster是一个多线程Java应用程序,旨在强制Web/应用程序服务器上的目录和文件名.它可以选择执行纯暴力,在查询隐藏文件和目录方面非常好用. 1)安装DirBuster 前提:电脑中必须安 ...

  8. (通用版)salesforce中soql及sosl的伪‘Like’模糊检索

    salesforce里有soql.sosl两种查询语法,soql针对模糊搜索也有‘like’关键字,然而只能针对其自带字段如:Name.Id:对于自定义添加的字段如:Message__c.Note__ ...

  9. 下拉框搜索插件chosen

    {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. qt 获取汉字拼音首字母

    #include "mainwindow.h"#include "ui_mainwindow.h"#include <QDebug>#include ...

  2. [Python] 项目的配置覆盖与合并

    参考来源: https://www.liaoxuefeng.com/wiki/1016959663602400/1018490750237280 代码稍微修改了一下 import os import ...

  3. java中的内存分配问题

    class A{ int i; int j; } clsaa demo{ public static void main(String[] args){ A aa = new A(); A aa; / ...

  4. 【洛谷4482】Border的四种求法(后缀自动机_线段树合并_链分治)

    这题我写了一天后交了一发就过了我好兴奋啊啊啊啊啊啊 题目 洛谷 4482 分析 这题明明可以在线做的,为什么我见到的所有题解都是离线啊 -- 什么时候有机会出一个在线版本坑人. 题目的要求可以转化为求 ...

  5. 将python工程部署到新服务器(对virtualenv工具进行环境迁移)

    将python工程部署到新服务器(对virtualenv工具进行环境迁移) # 从开发的电脑上导出 pip list 到 requirements.txt 文件pip freeze > requ ...

  6. JFR 使用记录

    进程的内存信息,可以使用jmap 和 jstack 等dump出文件,使用jhat 分析 dump 文件.不过比较简陋. 可以不停进程的方式有 JFR 或者taobao 开源组件. 本篇只记录JFR相 ...

  7. Delphi RSA签名与验签【支持SHA1WithRSA(RSA1)、SHA256WithRSA(RSA2)和MD5WithRSA签名与验签】

    作者QQ:(648437169) 点击下载➨ RSA签名与验签 [delphi RSA签名与验签]支持3种方式签名与验签(SHA1WithRSA(RSA1).SHA256WithRSA(RSA2)和M ...

  8. DRF框架(三)——media资源路径设置、多表设计复习及补充、序列化组件(ModelSerializer)操作多表(序列化与反序列化)、多表序列化与反序列化整合(重点)

    media资源路径设置  (设置好后把图片放在这个文件夹中,通过链接能访问到图片) 1.先在根目录设置一个media文件夹 2.配置settings.py,加上下面的 MEDIA_URL = '/me ...

  9. Jmeter相关参数

    一.线程组 线程组主要包含三个参数:线程数.准备时长(Ramp-Up Period(in seconds)).循环次数. 线程数:虚拟用户数.一个虚拟用户占用一个进程或线程.设置多少虚拟用户数在这里也 ...

  10. mysql执行顺序与join连接

    mysql加载顺序 手写顺序 SELECT DISTINCT <select list> FROM <left_table> join <join_type> JO ...