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);
});
ztree根据关键字模糊搜索的更多相关文章
- zTree树的模糊搜索
工作需要,所以做了一个比较方便的搜索功能:1.功能实现都是基于zTree的API:2.如有更好的建议,欢迎拍我:其中要说明下的是flag 这个字段, 这是我自己定义的扩展字段,代码中涉及到flag 请 ...
- ztree树的模糊搜索功能
在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择 具体实现过程如下 ...
- ztree 树的模糊搜索
(转载),有个坑记录下: (原文)实现类似下面这种: /** * 展开树 * @param treeId */ function expand_ztree(treeId) { var treeObj ...
- 百度地图API 关键字模糊搜索
http://api.map.baidu.com/place/v2/search?q=广场®ion=汕头&output=json&ak=5E56A48675a5cd09a ...
- [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示
今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...
- salesforce中soql及sosl的伪‘Like’模糊检索
salesforce里有soql.sosl两种查询语法,soql针对模糊搜索也有‘like’关键字,然而只能针对其自带字段如:Name.Id:对于自定义添加的字段如:Message__c.Note__ ...
- DirBuster工具扫描敏感文件
DirBuster是一个多线程Java应用程序,旨在强制Web/应用程序服务器上的目录和文件名.它可以选择执行纯暴力,在查询隐藏文件和目录方面非常好用. 1)安装DirBuster 前提:电脑中必须安 ...
- (通用版)salesforce中soql及sosl的伪‘Like’模糊检索
salesforce里有soql.sosl两种查询语法,soql针对模糊搜索也有‘like’关键字,然而只能针对其自带字段如:Name.Id:对于自定义添加的字段如:Message__c.Note__ ...
- 下拉框搜索插件chosen
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- iOS 基于 itemServices 进行本地安装 ipa 应用安装包
itemServices 协议 itemServices 是苹果推出的一款协议.基于这款协议,我们在本地部署一个服务器,将 ipa 包存放到本地服务器.然后,测试人员只要通过 iOS 测试设备的 Sa ...
- [MySQL] MySQL存储过程 事务transaction 数据表重建
直接上代码 -- 删除存储过程 DROP PROCEDURE IF EXISTS `renew_message_queue`; -- 添加; 的转义 DELIMITER ;; CREATE PROCE ...
- Win732位DotNetCore部署IIS错误记录
部署环境为:Win7专业版32位,数据库Mysql5.7.27-win32 1.先启用IIS功能 2.安装Mysql5.7.27-win32,使用解压版安装 安装步骤: mysql的解压根目录下新建m ...
- Centos7快速安装Rancher
通过docker,我们可以快速安装rancher 安装步骤如下:[root@localhost ~]# #run运行,-d后台模式 --restart=always跟随docker启动,-p映射端口, ...
- ORA-01126: 数据库必须已装载到此实例并且不在任何实例中打开
原因:修改归档模式的操作只能在 mount 状态下进行,不能处于 open 状态. SQL> alter database archivelog;alter database archivelo ...
- mongo的用户角色配置
mongo角色说明: Read:允许用户读取指定数据库 readWrite:允许用户读写指定数据库 dbAdmin:允许用户在指定数据库中执行管理函数,如索引创建.删除,查看统计或访问system.p ...
- mysql笔记7--一句查询语句的过程
1 sql语句示例 select *from A where id=1 2 mysql基本架构图 (1)Mysql分为Server层和引擎层两个部分 (2)Server层包括连接器,查询缓存,分析器, ...
- Eureka 基础知识
Eureka 忽略元数据末尾 回到原数据开始处 Eureka是netflix公司研发并且开源的一个服务发现组件. Eureka架构图: Eureka组件包含注册中心(Eureka Server)和eu ...
- 阿里巴巴 Java 开发手册(三): 代码格式
1. [强制]大括号的使用约定.如果是大括号内为空,则简洁地写成{}即可,不需要换行:如果 是非空代码块则: 1) 左大括号前不换行. 2) 左大括号后换行. 3) 右大括号前换行. 4) 右大括号后 ...
- C#使用Autofac实现控制反转IoC和面向切面编程AOP
Autofac是一个.net下非常优秀,性能非常好的IOC容器(.net下效率最高的容器),加上AOP简直是如虎添翼.Autofac的AOP是通过Castle(也是一个容器)项目的核心部分实现的,名为 ...