本文分享了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="../../../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>
这样就简单的实现了模糊搜索显示的功能了。
第二个Ztree树结构模糊搜索实现方法,具体内容如下
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">
以上就是jquery ztree实现模糊搜索功能的代码,希望对大家的学习有所帮助。

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称,适用于数据分析和Web开发。 2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

JavaScript不需要安装,因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中,通过标签嵌入HTML文件中运行。2)在Node.js环境中,下载并安装Node.js后,通过命令行运行JavaScript文件。

如何在Quartz中提前发送任务通知在使用Quartz定时器进行任务调度时,任务的执行时间是由cron表达式设定的。现�...


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3汉化版
中文版,非常好用

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

禅工作室 13.0.1
功能强大的PHP集成开发环境