ztree根据关键字模糊搜索

最新推荐文章于 2025-11-13 02:16:10 发布

原创

最新推荐文章于 2025-11-13 02:16:10 发布 · 2.8w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#ztree #jquery

本文介绍了如何使用zTree进行关键字模糊搜索。通过zTree API，实现了展示完整树结构并根据关键字筛选、隐藏不符合条件的叶子节点的功能。提供了页面结构和核心JS代码示例，并附带了Demo截图及资源下载链接。

说明

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核心功能 -->

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

BinaryCSharp

关注关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
8
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

zTree实现可搜索功能（升级版）

游海东的技术专栏

11-04

8708

1、问题背景（1）生成zTree（2）点击节点选中并给输入框赋值（3）输入某个字符，树节点含有该字符被选中，颜色发生变化2、实现源码 zTree具有搜索功能 var setting = { view: { showIcon:false, showTitle: false, showLine: true, fontCss: se

ztree模糊搜索demo

07-31

ztree模糊搜索demo,根据关键字显示叶子节点

8 条评论您还未登录，请先登录后发表或查看评论

jquery ztree实现模糊搜索功能

01-21

本文分享了jquery ztree实现模糊搜索功能两个实例，供大家参考，具体内容如下 ztree官方demo代码里的: 根据参数查找节点以上文件修改成如下代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE> <meta http-equiv=content-type content=text/html; charset=UTF-8> <link rel=stylesheet href=..

开源项目 `fuzzysearch` 使用教程：极速模糊搜索的终极指南

最新发布

gitblog_00463的博客

11-13

932

在日常开发中，我们经常需要实现搜索功能，但传统的精确匹配往往无法满足用户的需求。用户可能记不清完整的搜索词，或者输入时出现拼写错误，这时候模糊搜索（Fuzzy Search）就显得尤为重要。 `fuzzysearch` 是一个轻量级、高性能的 JavaScript 模糊搜索库，它能够在毫秒级别完成字符串的模糊匹配，特别适合用于自动补全、数据过滤等场景。 ## 📋 目录 - [什么是模糊搜索

jquery zTree异步加载、模糊搜索简单实例分享

10-22

主要为大家详细介绍了jquery zTree异步加载、模糊搜索简单实例，感兴趣的小伙伴们可以参考一下

ztree 树的模糊搜索

weixin_30346033的博客

04-12

190

（转载），有个坑记录下： (原文)实现类似下面这种： /** * 展开树 * @param treeId */ function expand_ztree(treeId) { var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.expandAll(true); } /** * 收起树：只展...

ztree根据关键字模糊搜索改良了一下下

weixin_34008784的博客

05-15

173

2019独角兽企业重金招聘Python工程师标准>>> ...

ztree 带搜索

01-24

ztree根据关键字模糊搜索　根据关键字显示叶子节点　

Ztree 模糊搜索

Green luo的博客

08-02

1258

在做Ztree搜索时，发现有点问题，当搜索框的值为空时，不能显示全部的Ztree,有些人选择重新加载Ztree,感觉对服务器是一种压力，我的观点是客服端做的不让服务器去做，另外有一个观点把隐藏的点遍历出来，当为空时，加载数组，这种没有弄出来，现在有一种简单的方法去实现，优快云中有一个下载资源要13积分，简直丧心病狂了，很气愤，就写下来了，引用了别人的一些代码! 关键代码如下： if ($(...

ztree模糊搜索

g_blue_wind的博客

12-05

1087

1、方法 $(function() { //加载树结构 searchDepart(); }); //加载树方法和事件 function searchDepart() { var departName = $("input[name='gridName']").val(); $.ajax({ type : 'POST', url : '${ctx}/newDepartCont

Ztree ajax关键字检索动态树

gwpJava的专栏

07-05

888

实现效果：初始页面匹配记录无记录 Js代码： [javascript] view plaincopy "text/javascript"> var quickMsg = "输入关键字按回车键检索"; $(function(){ $("#quickQuery").focus( funct

SpringMvc+Mybatis+Ztree模糊搜索+异步

01-26

包含完整的代码+数据库，实现tree模糊搜索+异步加载，实现了完整的一套。请大家试用，有任何问题，请留言。

zTree模糊查询Demo

06-01

ztree模糊查询，实现动态搜索，查询结果高亮显示并隐藏不符合条件节点

zTree模糊查询--zTree查询根据名称查询节点

u013868665的博客

11-28

2907

很久之前做的程序中用到的方法，最近偶然想起来，还是比较实用的。没有写点击事件，直接上查询方法。 function searchNode(value) { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //发现这行代码放在外面时会报 getNodesByParamFuzzy为null if (value == "") return; ...

Extjs TreeFilter 根据关键字过滤树

01-21

879

jQuery MiniUI 开发教程树形控件树操作：过滤树（十一）过滤树参考示：过滤树 filter节点过滤 tree.filter(function (node) { var text = node.text ? no...

zTree多条件模糊查询

weixin_30338497的博客

12-28

342

function searchFun() { var zTrees=$.fn.zTree.getZTreeObj("ztree");//获得所有几点 var hiddenNodes=[];//显示的数组 var code2=$("#code2").val(); var code2Arr=new Array();//code搜索数组 var proArr=new Arr...

zTree 关键词过滤

fk129

09-05

864

引入下面的zTree文件： ztree/css/zTreeStyle/zTreeStyle.css; ztree/js/jquery.ztree.core.js ztree/js/jquery.ztree.exhide.min.js html <div class="search-input"> <Input type="text" style="height:45px" v...

过滤树形结构数据

weixin_43760238的博客

08-17

958

// nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组 function filter(nodes, query) { // 判断当前节点是否包含关键字，包含则返回true，不包含则返回false let predicate = function (node) { if (node.title.indexOf(query) > -1) { return true; } else {