ztree根据关键字模糊搜索

最新推荐文章于 2021-09-15 16:46:20 发布
最新推荐文章于 2021-09-15 16:46:20 发布
阅读量2.8w 收藏 12
点赞数 2
分类专栏： ztree javascript jquery 文章标签： ztree jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/danielpei1222/article/details/52078013
版权

说明

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>
最低0.47元/天 解锁文章
BinaryCSharp
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
zTree 实现模糊搜索+高亮显示
Cruise的博客
03-27 1294
1，准备四个js文件 2，html页面 <div class="input_group" style="width: 400px;"> <i class="iconfont icon-sousuo l"></i> <input type="text" value="" onkeyup="AutoM...
ztree模糊搜索demo
07-31
ztree模糊搜索demo,根据关键字显示叶子节点
ztree 树的模糊搜索
weixin_30346033的博客
04-12 130
（转载），有个坑记录下： (原文)实现类似下面这种： /** * 展开树 * @param treeId */ function expand_ztree(treeId) { var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.expandAll(true); } /** * 收起树：只展...
ztree根据关键字模糊搜索 改良了一下下
weixin_34008784的博客
05-15 130
2019独角兽企业重金招聘Python工程师标准>>> ...
Ztree 模糊搜索
Green luo的博客
08-02 1158
在做Ztree搜索时，发现有点问题，当搜索框的值为空时，不能显示全部的Ztree,有些人选择重新加载Ztree,感觉对服务器是一种压力，我的观点是客服端做的不让服务器去做，另外有一个观点把隐藏的点遍历出来，当为空时，加载数组，这种没有弄出来，现在有一种简单的方法去实现，CSDN中有一个下载资源要13积分，简直丧心病狂了，很气愤，就写下来了，引用了别人的一些代码! 关键代码如下：  if ($(...
ztree模糊搜索
g_blue_wind的博客
12-05 897
1、方法 $(function() { //加载树结构 searchDepart(); }); //加载树方法和事件 function searchDepart() { var departName = $("input[name='gridName']").val(); $.ajax({ type : 'POST', url : '${ctx}/newDepartCont
jquery ztree实现模糊搜索功能
01-21
本文分享了jquery ztree实现模糊搜索功能两个实例，供大家参考，具体内容如下 ztree官方demo代码里的: 根据参数查找节点 以上文件修改成如下代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ...
ztree 带搜索
01-24
ztree根据关键字模糊搜索　根据关键字显示叶子节点　
Ztree ajax关键字检索动态树
gwpJava的专栏
07-05 802
实现效果： 初始页面  匹配记录 无记录  Js代码： [javascript] view plaincopy "text/javascript">  var quickMsg = "输入关键字按回车键检索";  $(function(){              $("#quickQuery").focus(                  funct
jquery zTree异步加载、模糊搜索简单实例分享
10-22
主要为大家详细介绍了jquery zTree异步加载、模糊搜索简单实例，感兴趣的小伙伴们可以参考一下
SpringMvc+Mybatis+Ztree模糊搜索+异步
01-26
包含完整的代码+数据库，实现tree模糊搜索+异步加载，实现了完整的一套。请大家试用，有任何问题，请留言。
zTree模糊查询Demo
06-01
ztree模糊查询，实现动态搜索，查询结果高亮显示并隐藏不符合条件节点
ztreeFilterDemo(简单输入点击查找的树)
04-15
ztreeFilterDemo(简单输入点击查找的树)，相对简单一点，可以拿来做为学习学习。加以改进功能。
zTree实现可搜索功能（升级版）
游海东的技术专栏
11-04 8487
1、问题背景（1）生成zTree（2）点击节点选中并给输入框赋值（3）输入某个字符，树节点含有该字符被选中，颜色发生变化2、实现源码 zTree具有搜索功能 var setting = { view: { showIcon:false, showTitle: false, showLine: true, fontCss: se
Extjs TreeFilter 根据关键字过滤树
01-21 765
jQuery MiniUI 开发教程 树形控件 树操作：过滤树（十一） 过滤树                                参考示：过滤树                             filter节点过滤             tree.filter(function (node) {     var text = node.text ? no...
过滤树形结构数据
weixin_43760238的博客
08-17 789
// nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组 function filter(nodes, query) { // 判断当前节点是否包含关键字，包含则返回true，不包含则返回false let predicate = function (node) { if (node.title.indexOf(query) > -1) { return true; } else {
zTree模糊查询--zTree查询根据名称查询节点
u013868665的博客
11-28 2778
很久之前做的程序中用到的方法，最近偶然想起来，还是比较实用的。没有写点击事件，直接上查询方法。 function searchNode(value) { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //发现这行代码放在外面时会报 getNodesByParamFuzzy为null if (value == "") return; ...
zTree - 根据关键字模糊搜索
热门推荐
简单记录一下。
09-15 21万+
说明 zTree 是一个依靠 jQuery 实现的多功能 “树插件“。 本文通过利用zTree API编写了一个根据关键字进行模糊搜索的demo。 整体思路： 1. 利用zTree显示完整树结构； 2. 根据关键字，筛选出不包含关键字的叶子节点，并将这些不符合条件的叶子节点全部隐藏 主要代码 一、页面部分 1、html页面需要引入以下资源 <!-- jquery包，ztree依赖jquery --> <script type="text/javascript" sr.
ztree vue 模糊搜索
最新发布
08-24
在Vue项目中使用zTree实现模糊搜索的步骤如下： 1. 创建一个Vue项目，可以使用vue-cli来快速搭建。 2. 引入zTree插件，可以通过npm安装或者直接下载js文件并引入到项目中。 3. 在Vue组件中使用zTree，并创建一个树形结构。 4. 在zTree的配置项中，添加一个回调函数来实现模糊搜索的功能。这个回调函数可以是官方提供的模糊搜索函数fuzzySearch的修改版，根据自己的需求进行相应的修改。 5. 在模糊搜索的回调函数中，可以通过遍历树的节点，使用正则表达式匹配搜索关键字并将匹配到的节点高亮显示。 6. 参考一些资料，如官方文档或者其他人的经验，来帮助理解和实现zTree的模糊搜索功能。 以上是使用zTree实现模糊搜索的大致步骤，具体的代码实现和配置可能有所不同，可以根据自己的需求和实际情况进行相应的修改和调整。引用提供了一个具体的实现步骤和效果图，引用提供了zTree在Vue项目中使用的参考资料，引用提供了关于模糊搜索功能的一些修改方法的参考资料。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [在vue-cli项目中使用ztree，并实现ztree的模糊搜索高亮](https://blog.csdn.net/weixin_44101052/article/details/90372593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [实例详解ztree在vue项目中使用并且带有搜索功能](https://download.csdn.net/download/weixin_38610870/12953434)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue2.x + zTree，简单的二次封装(二) -- 添加模糊搜索功能](https://blog.csdn.net/mf_717714/article/details/126864127)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值