ztree根据关键字模糊搜索
来源:互联网 发布:淘宝绝对正品的文具店 编辑:程序博客网 时间:2024/05/02 19:24
说明
zTree 是一个依靠 jQuery 实现的多功能 “树插件“。
本文通过利用zTree API编写了一个根据关键字进行模糊搜索的demo。
整体思路:
1. 利用zTree显示完整树结构;
2. 根据关键字,筛选出不包含关键字的叶子节点,并将这些不符合条件的叶子节点全部隐藏
主要代码
1. 页面部分
1. html页面需要引入以下资源
<!-- jquery包,ztree依赖jquery --> <script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script><!-- ztree核心包,ztree核心功能 --> <script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script><!-- ztree exhide包,ztree隐藏显示结点需要此包支持 --> <script type="text/javascript" src="ztree/js/jquery.ztree.exhide-3.5.min.js"></script>
2. html 页面结构
<div class="container"> <div class="search-bar"> <input id="keyword" type="text" placeholder="请输入..."> <button id="search-bt">搜索</button> </div> <div class="content"> <!-- 用于显示ztree的html元素的class一定要设置为ztree--> <ul id="tree-obj" class="ztree"></ul> </div> </div>
2. JS代码
下面只给出用于模糊搜索的核心代码,完整的代码下载。
var hiddenNodes=[]; //用于存储被隐藏的结点//过滤ztree显示数据function filter(){ //显示上次搜索后背隐藏的结点 zTreeObj.showNodes(hiddenNodes); //查找不符合条件的叶子节点 function filterFunc(node){ var _keywords=$("#keyword").val(); if(node.isParent||node.name.indexOf(_keywords)!=-1) return false; return true; }; //获取不符合条件的叶子结点 hiddenNodes=zTreeObj.getNodesByFilter(filterFunc); //隐藏不符合条件的叶子结点 zTreeObj.hideNodes(hiddenNodes);};
Demo截图
- 初始状态
- 搜索结果-1
- 搜索结果-A
相关资源
- demo下载:http://download.csdn.net/download/malingshuma/9590962
- ztree官网:http://www.treejs.cn/v3/main.php#_zTreeInfo
0 0
- ztree根据关键字模糊搜索
- zTree的模糊搜索
- zTree的模糊搜索
- zTree模糊搜索
- zTree的模糊搜索
- ztree模糊搜索
- ztree 树的模糊搜索
- zTree 模糊搜索并高亮文本
- ztree节点搜索模糊匹配[粘贴即可]
- mysql模糊搜索关键字包含%
- zTree实现模糊搜索并高亮显示
- (10)根据关键字搜索
- sql-365 行转列 模糊搜索关键字
- zTree树型组件(expandNode) 根据输入的关键字模糊查询并定位标红显示并且只展开匹配到的子节点的所有父节点
- zTree模糊查询
- 根据关键字搜索的一个存贮过程
- Linux apropos --根据关键字搜索命令
- 根据搜索关键字动态显示表格数据
- hdu5776 sum
- POJ 2377 Bad Cowtractors (最大生成树)
- 去除WordPress的小工具上的 WordPress.org 版权
- Shader Storage Buffer Object
- 求链表倒数第k个节点
- ztree根据关键字模糊搜索
- 常见HTTP错误码小结
- 优惠贴片 **% off
- 人工神经网络模型
- vs2015安装--未解决
- android studio音乐播放方式
- 如何在同一页上运行不同版本的jQuery?(转)
- fflush(stdin) & fflush(stdout)
- LightOJ 1198