This article shares two examples of jquery ztree implementing fuzzy search function for your reference. The specific content is as follows
In the official demo code of ztree:
Find nodes based on parameters
Modify the above file into the following code
<!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="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exhide-3.5.js"></script> <!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>--> <SCRIPT type="text/javascript"> var setting = { data: { key: { title: "t" }, simpleData: { enable: true } } }; var zNodes =[ { id:1, pId:0, name:"节点属性搜索演示 1", t:"id=1"}, { id:11, pId:1, name:"关键字可以是名字", t:"id=11"}, { id:12, pId:1, name:"关键字可以是level", t:"id=12"}, { id:13, pId:1, name:"关键字可以是id", t:"id=13"}, { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"}, { id:2, pId:0, name:"节点搜索演示 2", t:"id=2"}, { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"}, { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"}, { id:23, pId:2, name:"搜我吧", t:"id=23"}, { id:3, pId:0, name:"节点搜索演示 3", t:"id=3"}, { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"}, { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"}, { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"} ]; function focusKey(e) { if (key.hasClass("empty")) { key.removeClass("empty"); } } function blurKey(e) { if (key.get(0).value === "") { key.addClass("empty"); } } var lastValue = "", nodeList = [], fontCss = {}; function clickRadio(e) { lastValue = ""; searchNode(e); } function searchNode(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); if (!$("#getNodesByFilter").attr("checked")) { var value = $.trim(key.get(0).value); var keyType = ""; if ($("#name").attr("checked")) { keyType = "name"; } else if ($("#level").attr("checked")) { keyType = "level"; value = parseInt(value); } else if ($("#id").attr("checked")) { keyType = "id"; value = parseInt(value); } if (key.hasClass("empty")) { value = ""; } if (lastValue === value) return; lastValue = value; if (value === "") { zTree.showNodes(zTree.transformToArray(zTree.getNodes())) ; return; } if ($("#getNodeByParam").attr("checked")) { var node = zTree.getNodeByParam(keyType, value); if (node === null) { nodeList = []; } else { nodeList = [node]; } } else if ($("#getNodesByParam").attr("checked")) { nodeList = zTree.getNodesByParam(keyType, value); } else if ($("#getNodesByParamFuzzy").attr("checked")) { nodeList = zTree.getNodesByParamFuzzy(keyType, value); } } else { updateNodes(false); nodeList = zTree.getNodesByFilter(filter); } /**不查询父级 for(var x = 0 ; x<nodeList.length ; x++){ if(nodeList[x].isParent){ nodeList.splice(x--,1); } } */ nodeList = zTree.transformToArray(nodeList); updateNodes(true); } function updateNodes(highlight) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var allNode = zTree.transformToArray(zTree.getNodes()); zTree.hideNodes(allNode); for(var n in nodeList){ findParent(zTree,nodeList[n]); } zTree.showNodes(nodeList); } function findParent(zTree,node){ zTree.expandNode(node,true,false,false); var pNode = node.getParentNode(); if(pNode != null){ nodeList.push(pNode); findParent(zTree,pNode); } } function getFontCss(treeId, treeNode) { return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; } function filter(node) { return !node.isParent && node.isFirstNode; } var key; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); key = $("#key"); key.bind("focus", focusKey) .bind("blur", blurKey) .bind("propertychange", searchNode) .bind("input", searchNode); $("#name").bind("change", clickRadio); $("#level").bind("change", clickRadio); $("#id").bind("change", clickRadio); $("#getNodeByParam").bind("change", clickRadio); $("#getNodesByParam").bind("change", clickRadio); $("#getNodesByParamFuzzy").bind("change", clickRadio); $("#getNodesByFilter").bind("change", clickRadio); }); </SCRIPT> </HEAD> <BODY> <h1 id="根据参数查找节点">根据参数查找节点</h1> <h6 id="文件路径-core-searchNodes-html">[ 文件路径: core/searchNodes.html ]</h6> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2 id="getNodeByParam-getNodesByParam-getNodesByParamFuzzy-方法操作说明">1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作说明</h2> <ul class="list"> <li class="highlight_red">使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法,详细请参见 API 文档中的相关内容</li> <li><p>搜索试试看:<br/> 属性值( value ):<input type="text" id="key" value="" class="empty" /><br/> 属性( key ):<input type="radio" id="name" name="keyType" class="radio first" checked /><span>name (string)</span><br/> <input type="radio" id="level" name="keyType" class="radio" style="margin-left:68px;" /><span>level (number) ... 根节点 level = 0</span><br/> <input type="radio" id="id" name="keyType" class="radio" style="margin-left:68px;" /><span>id (number)</span><br/> 方法:<input type="radio" id="getNodeByParam" name="funType" class="radio first" /><span>getNodeByParam</span><br/> <input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/> <input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/> <input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (参考本页源码中 function filter)</span><br/> </p> </li> </ul> </li> <li class="title"><h2 id="setting-配置信息说明">2、setting 配置信息说明</h2> <ul class="list"> <li>不需要对 setting 进行特殊设置</li> </ul> </li> <li class="title"><h2 id="treeNode-节点数据说明">3、treeNode 节点数据说明</h2> <ul class="list"> <li class="highlight_red">请注意各个方法使用时保证传入查找的参数类型与设定要查找的属性的类型一致</li> </ul> </li> </ul> </div> </div> </BODY> </HTML>
In this way, the fuzzy search display function can be easily realized.
The second Ztree tree structure fuzzy search implementation method, the specific content is as follows
function expand_ztree(treeId){ var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.expandAll(true); } function close_ztree(treeId){ var treeObj = $.fn.zTree.getZTreeObj(treeId); var nodes = treeObj.transformToArray(treeObj.getNodes()); var nodeLength = nodes.length; for (var i = 0; i < nodeLength; i++) { if (nodes[i].id == '0') { //根节点:展开 treeObj.expandNode(nodes[i], true, true, false); } else { //非根节点:收起 treeObj.expandNode(nodes[i], false, true, false); } } } function search_ztree(treeId, searchConditionId){ searchByFlag_ztree(treeId, searchConditionId, ""); } function searchByFlag_ztree(treeId, searchConditionId, flag){ //<1>.搜索条件 var searchCondition = $('#' + searchConditionId).val(); //<2>.得到模糊匹配搜索条件的节点数组集合 var highlightNodes = new Array(); if (searchCondition != "") { var treeObj = $.fn.zTree.getZTreeObj(treeId); highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null); } //<3>.高亮显示并展示【指定节点s】 highlightAndExpand_ztree(treeId, highlightNodes, flag); } function highlightAndExpand_ztree(treeId, highlightNodes, flag){ var treeObj = $.fn.zTree.getZTreeObj(treeId); //<1>. 先把全部节点更新为普通样式 var treeNodes = treeObj.transformToArray(treeObj.getNodes()); for (var i = 0; i < treeNodes.length; i++) { treeNodes[i].highlight = false; treeObj.updateNode(treeNodes[i]); } //<2>.收起树, 只展开根节点下的一级节点 close_ztree(treeId); //<3>.把指定节点的样式更新为高亮显示,并展开 if (highlightNodes != null) { for (var i = 0; i < highlightNodes.length; i++) { if (flag != null && flag != "") { if (highlightNodes[i].flag == flag) { //高亮显示节点,并展开 highlightNodes[i].highlight = true; treeObj.updateNode(highlightNodes[i]); //高亮显示节点的父节点的父节点....直到根节点,并展示 var parentNode = highlightNodes[i].getParentNode(); var parentNodes = getParentNodes_ztree(treeId, parentNode); treeObj.expandNode(parentNodes, true, false, true); treeObj.expandNode(parentNode, true, false, true); } } else { //高亮显示节点,并展开 highlightNodes[i].highlight = true; treeObj.updateNode(highlightNodes[i]); //高亮显示节点的父节点的父节点....直到根节点,并展示 var parentNode = highlightNodes[i].getParentNode(); var parentNodes = getParentNodes_ztree(treeId, parentNode); treeObj.expandNode(parentNodes, true, false, true); treeObj.expandNode(parentNode, true, false, true); } } } } function getParentNodes_ztree(treeId, node){ if (node != null) { var treeObj = $.fn.zTree.getZTreeObj(treeId); var parentNode = node.getParentNode(); return getParentNodes_ztree(treeId, parentNode); } else { return node; } } function setFontCss_ztree(treeId, treeNode) { if (treeNode.id == 0) { //根节点 return {color:"#333", "font-weight":"bold"}; } else if (treeNode.isParent == false){ //叶子节点 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"}; } else { //父节点 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; } } //==============HTML============== class="padd" style="padding-bottom: 0px;"> class="input-append row-fluid" style="margin-bottom: 0px;"> "search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/> "button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索 "dep_tree" class="ztree">
The above is the code for jquery ztree to implement fuzzy search function. I hope it will be helpful to everyone's learning.

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Linux new version
SublimeText3 Linux latest version

WebStorm Mac version
Useful JavaScript development tools

Dreamweaver CS6
Visual web development tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Chinese version
Chinese version, very easy to use
