zTree实现树的模糊搜索功能

项目中使用到zTree模糊搜索，查看官方API，官方提供的fuzzySearch()方法可以实现模糊搜索，但是当我点击子节点进行查询的时候，怎么也获取不到后台数据，js调试发现获取到的名字中加了span标签，后台无法获取数据。于是在网上查询资料后自己做一个demo。

主要代码

页面代码

<div class="zTreeDemoBackground left">搜索：<input type="text" id="key" class="empty" style="width: 80px;margin-left: 3px;font-weight: normal;"/><ul id="tree" class="ztree"></ul></div>

js代码

ztree初始化

function zTreeOnClick(event, treeId, treeNode) {$("#timing").html($("#Rtime").val());var name=treeNode.name;alert("你点击了："+name);}var setting = {callback: {onClick: zTreeOnClick},view: {fontCss: setFontCss},data: {simpleData: {enable: true}}};var zNodes =[{ id:1, pId:0, name:"国家", open:true},{ id:11, pId:1, name:"中国"},{ id:111, pId:11, name:"北京"},{ id:111, pId:11, name:"上海"},{ id:111, pId:11, name:"河南"},{ id:111, pId:11, name:"云南"},{ id:12, pId:1, name:"美国",isParent:true},{ id:122, pId:12, name:"华盛顿"},{ id:13, pId:1, name:"日本", isParent:true},{ id:133, pId:13, name:"东京"}];function showIconForTree(treeId, treeNode) {return !treeNode.isParent;};$(document).ready(function(){$.fn.zTree.init($("#tree"), setting, zNodes);document.getElementById("key").value = ""; //绑定事件  key = $("#key");  key.bind("focus", focusKey)  .bind("blur", blurKey)  .bind("propertychange", searchNode)   .bind("input", searchNode); });

隐藏不符合节点

//显示上次搜索后背隐藏的结点zTree.showNodes(hiddenNodes);//查找不符合条件的叶子节点function filterFunc(node){var _keywords=$("#key").val();if(node.isParent||node.name.indexOf(_keywords)!=-1) return false;return true;        };//获取不符合条件的叶子结点hiddenNodes=zTree.getNodesByFilter(filterFunc);//隐藏不符合条件的叶子结点zTree.hideNodes(hiddenNodes);

高亮显示符合条件节点并打开

//搜索节点
function searchNode(e) {  var zTree = $.fn.zTree.getZTreeObj("tree");  var value = $.trim(key.get(0).value);  var keyType = "name";  if (key.hasClass("empty")) {  value = "";  }  if (lastValue === value) return;  lastValue = value; if (value === ""){  updateNodes(false);  return;  }; updateNodes(false);nodeList = zTree.getNodesByParamFuzzy(keyType, value); //调用ztree的模糊查询功能，得到符合条件的节点  updateNodes(true); //更新节点
}  //高亮显示被搜索到的节点
function updateNodes(highlight) {  var zTree = $.fn.zTree.getZTreeObj("tree");  for( var i=0, l=nodeList.length; i<l; i++) {  nodeList[i].highlight = highlight;  zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //将搜索到的节点的父节点展开  zTree.updateNode(nodeList[i]);  }
}

设置颜色，需要配置view: {fontCss: setFontCss }

function setFontCss(treeId, treeNode) {  return (!!treeNode.highlight) ? {color:"#00ff66", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}

效果图：

搜索结果：

完整demo：https://download.csdn.net/download/f954618482/10452681

ztree官网：http://www.treejs.cn/v3/main.php#_zTreeInfo

zTree实现树的模糊搜索功能相关推荐

Android 利用AutoCompleteTextView实现模糊搜索功能，搜索结果自动提示，识别拼音首字母并转汉字提示
这里说一下怎么利用 Android 的 AutoCompleteTextView 控件实现模糊搜索功能,AutoCompleteTextView 自带自动提示功能.如果对自动提示的布局自定义要求比较 ...
微信小程序搜索php,如何解决微信小程序没有模糊搜索功能
现在微信小程序有重新推出新的功能,那就是进行模糊搜索,但是很多朋友微信小程序没有模糊搜索功能怎么办,下文小编就为大家带来详细介绍,一起看看吧现在微信小程序有重新推出新的功能,那就是进行模糊搜索,用户 ...
小程序实现TreeView树多选功能
话不多说,先上效果图: 小程序实现Treeview树多选功能实现思路源数据结构首先我们的数据结构大概是: [{"id": "0","name&q ...
【Vue实践】列表搜索框中模糊搜索功能的两种实现方式
文章目录 1.Demo演示 2.HTML结构 3.实现 3.1 基于计算属性`computed`实现 3.2 基于侦听器`watch`实现 1.Demo演示模糊搜索功能是日常开发中常见的一种功能,这 ...
史上最全，在vue中使用zTree实现树型结构
最近做了蛮多需求都是在vue里面去操作dom,着实让人头大需求如下:要求树形结构按照设计稿样式(ztree原本的样式ui接受不了) 鼠标浮动上去的时候,有功能按钮出现,浮在功能按钮上面,出现对应的功 ...
ztree插件树状图
开发工具与关键技术:MVC 作者:Mr_恺撰写时间:2019年6月27日树状图不知道大家有没有做过,要不是做项目,项目中有这个需求,我也没有那么快能接触到这过功能,刚开始的时候对这个功能真的一脸懵 ...
树形图html插件,前端树形图 -- zTree -- jQuery 树插件
zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).所 ...
给文本框添加模糊搜索功能（“我记录”MVC框架下实现）
步骤: 1.在文本框中输入内容时,触发keyup事件: 2.在keyup事件的处理方法中,通过Ajax调用控制器的方法: 3.在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据, ...
js 实现模糊搜索功能
最近遇到一个需要前端对已有数据做模糊查询的功能.方法有很多种,个人比较推荐使用正则表达式来实现,下面是我实现的方法: 封装一个公用的方法: //list 是已有的数据,search 是模糊搜索的关键字 ...
前端实现模糊搜索功能
一.前言最近在项目中遇到的业务需求,页面创建时把所有数据都加载了,这种情况下,使用后端SQL语句进行模糊,有点浪费时间,决定使用前端的输入框 + 按钮实现对数据的模糊搜索二.HTML <di ...

zTree实现树的模糊搜索功能

主要代码

zTree实现树的模糊搜索功能相关推荐

最新文章

热门文章