Ztree 实现搜索节点高亮显示,重置功能
来源:互联网 发布:淘宝如何引流量 编辑:程序博客网 时间:2024/05/17 08:18
上一篇博客是artDialog+Ztree,想看基本实现的请拐弯左转,这篇就直接将搜索的实现了
<input type="text" id="searchTreeText"><button type="submit" id="searchBtnTree">搜索</button><button type="submit" id="reset">重置</button>
下面的实现是我从网上各个地方找的掺杂到一起的
//搜索节点并高亮显示$("#searchBtnTree").on("click", function() { var key = $("#searchTreeText").val(); if (key != null) { var hidenode = ztree.transformToArray(ztree.getNodes());//将 zTree 使用的标准 JSON 嵌套格式的数据转换为简单 Array 格式 ztree.hideNodes(hidenode);//隐藏所有节点 nodeList = ztree.getNodesByParamFuzzy("name", key, null);//模糊查询 if (nodeList && nodeList.length > 0) { for ( var i = 0; i < nodeList.length; i++) { nodeList[i].highlight = true;//设置高亮 findParent(ztree, nodeList[i]); ztree.updateNode(nodeList[i]); ztree.expandNode(nodeList[i], true, true, false);//展开节点 } } }else{ alert("请输入搜索条件"); }});//找到其父亲节点function findParent(ztree, node) { ztree.expandNode(node, true, false, true);//展开节点 ztree.showNode(node);//显示该节点 var pNode = node.getParentNode(); if (pNode != null) { findParent(ztree, pNode); }}//设置字体颜色function setFontCss(treeId, treeNode) { if (treeNode.id == 1) {//根节点 return { color : "black" }; } if (treeNode.highlight) {//如果符合模糊查询条件则高亮显示 return { color : "red" }; }else{ return { color : "black" }; }}//重置$("#reset").on("click",function(){ treeNode.highlight=false;所有节点取消高亮 $("#searchTreeText").val('');//搜索框重置 $.windowbox.treeInit();//树初始化 ztree.expandNode(treeNode,true,true,true); ztree.refresh();});
这样就实现了搜索并高亮显示,重置的功能,下面是效果图
转载请说明地址并告知我,谢谢~
阅读全文
0 0
- Ztree 实现搜索节点高亮显示,重置功能
- zTree实现模糊搜索并高亮显示
- ztree 实现树的搜索功能
- Jtree节点实现高亮功能
- zTree 模糊搜索并高亮文本
- ztree显示选中节点
- zTree通过拖拽节点实现排序功能
- 搜索结果的高亮显示实现
- ztree添加搜索定位节点
- 实现zTree节点显示与操作(添加,删除)同步
- zTree实现可搜索功能(升级版)
- ztree搜索并且定位到搜索节点
- zTree实现删除树节点
- ztree节点搜索模糊匹配[粘贴即可]
- 使用正则表达式实现搜索关键字高亮显示
- 使用正则表达式实现搜索关键字高亮显示
- 用js实现文本点击搜索,文本高亮显示
- 使用Pattern、Matcher来实现搜索高亮显示
- Java 8:不要再用循环了
- 工作中redis锁的问题记录
- 【搜索】FZU 2150 Fire Game
- 欢迎使用CSDN-markdown编辑器
- s3c2440时钟学习(韦东山老师课程学习笔记)
- Ztree 实现搜索节点高亮显示,重置功能
- Python——网络爬虫
- Codeforces 892 B. Wrath (递推)
- 【转】Docker Volume 之权限管理-Docker运行gogs容器时使用-v参数映射本地目录-报权限错误的原因及解决办法
- Luminar 2018(图片后期处理软件)官方破解版V2018.1.0.0.1010下载 | luminar photo editor
- Document Object Model( 文档对象模型 )
- 二叉树的生成与遍历
- 摩尔定律还是生效吗?
- InputStreamReader和BufferedReader用法及真实案例