zTree模糊搜索,显示全部节点和高亮显示
function searchFun() {
var value;
if($("#code2").val()!=null && $("#code2").val()!=''){
value="【"+$("#code2").val()+"】"+$("#productName").val();
}else {
value=$("#productName").val();
}
var allNode = zTreeObj.transformToArray(zTreeObj.getNodes());
zTreeObj.hideNodes(allNode);//隐藏所有节点
hiddenNodes = zTreeObj.getNodesByParamFuzzy("name", value, null);//搜索含有value关键字的节点
hiddenNodes = zTreeObj.transformToArray(hiddenNodes);//转化为数组
for(var n in hiddenNodes){//遍历
findParent(zTreeObj,hiddenNodes[n]);//找到其父节点
}
zTreeObj.showNodes(hiddenNodes);//显示满足的所有节点
/*highlightAndExpand_ztree(hiddenNodes);*/
if (value == "") {
zTreeObj.expandAll(false);
}
}
function findParent(treeObj,node){
treeObj.expandNode(node,true,true,true);//展开treeObj中所有节点并获得焦点
var pNode = node.getParentNode();//获取父节点
findNextNode(node);//后一个节点
findPreNode(node);//前一个节点
if(pNode != null){
hiddenNodes.push(pNode);//
findParent(treeObj,pNode);//递归查询上上一级父节点
}
}
function findNextNode(node) {//获取节点的下一个节点
var nextNode=node.getNextNode();
if(nextNode!=null){
if(nextNode.lvl==1){
return;
}
hiddenNodes.push(nextNode);
var children=nextNode.children;
if(children){
for(var i in children){
hiddenNodes.push(children[i]);
}
}
findNextNode(nextNode);//递归获取
}
} function findPreNode(node) {//获取节点的上一个节点
var preNode=node.getPreNode();
if(preNode!=null){
if(preNode.lvl==1){
return;
}
hiddenNodes.push(preNode);
var children=preNode.children;//获取节点的子节点集合
if(children){
for(var i in children){
hiddenNodes.push(children[i]);
}
}
findPreNode(preNode);
}
} /!**
* 高亮显示并展示
* @param highlightNodes 需要高亮显示的节点数组
*!/
function highlightAndExpand_ztree(highlightNodes) {
//先把全部节点更新为普通样式
for(var i = 0; i < highlightNodes.length; i++) {
highlightNodes[i].highlight = false;
zTreeObj.updateNode(highlightNodes[i]);
}
//把指定节点的样式更新为高亮显示,并展开
if(highlightNodes != null) {
for(var i = 0; i < highlightNodes.length; i++) {
//高亮显示节点,并展开
highlightNodes[i].highlight = true;
var t = highlightNodes[i].name;
t = "span style='color:red'" + t + "</span";//改变颜色
highlightNodes[i].name = t;
zTreeObj.updateNode(highlightNodes[i]);//执行修改
zTreeObj.expandNode(highlightNodes[i], true, true, true);
}
}
}
zTree模糊搜索,显示全部节点和高亮显示的更多相关文章
- ztree 展开一级节点 | ztree只显示到二级目录
// 默认展开一级节点var nodes = tree.getNodesByParam("level", 0);for (var i = 0; i < nodes.lengt ...
- 关于ztree打开关闭所有节点,选中指定id节点
var isOneByOneExpand=false;//是否递归展开 //展开节点 function expendNode(nodeId){ var node = treeObj.getNodeBy ...
- {二逼小青年的记事簿}为什么treelist不会显示子节点的文字?
<TreeView Name="treeView" DockPanel.Dock="Left" MinWidth="200" > ...
- Devexpress TreeList控件绑定显示父子节点对像
今天一位同事咨询Devexpress TreeList控件绑定自动显示父子节点对像,但结果是不会显示带父子节点关系,而是将所有的节点作为父节点显示出来了,对像类的代码如下 public class I ...
- zTree实现删除树节点
zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...
- zTree实现更新根节点中第i个节点的名称
zTree实现更新根节点中第i个节点的名称 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树 ...
- zTree实现获取一级节点数据
zTree实现获取一级节点数据 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</t ...
- Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态
前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...
- jquery Ztree v3.5 实例2 自定义显示在节点前的图片
显示效果如下: 代码如下: <html> <head><title></title></head> <script type=&quo ...
随机推荐
- MD5 SHA1 HMAC HMAC_SHA1区别
MD5.SHA1.HMAC.HMAC_SHA1区别 引言 什么是MD5,什么是SHA1,如何校验这些Hash.还有拿单个apk文件的MD5,SHA1讯问是不是原版的问题,在这里,让我们先来了解 ...
- OpenTSDB介绍
OpenTSDB 2.0, the scalable, distributed time series database可扩展.分布式时间序列数据库 1.背景 一些老的监控系统,它常常会出现这样的问题 ...
- Mysql相关知识点总结(一)
information_schema库:information_schema库中的表大都是temporory表,都是只读的,不能进行更新.删除和插入等操作,也不能加触发器,因为它们实际只是一个视图,不 ...
- 异常:Injection of autowired dependencies failed; nested exception is java.lang.IllegalArgumentException
这个异常是出现在注入配置文件中配置好的属性时报错的: Injection of autowired dependencies failed; nested exception is java.lang ...
- border-radio属性
boreder-radio属性是css3的新增属性,可以设置圆角的边框. <head> <style type="text/css"> *{ margin ...
- Android Studio 升级到3.0 提示 java.lang.NoClassDefFoundError
Android Studio 升级到3.0 提示 java.lang.NoClassDefFoundError 这个问题折腾了2个小时,最后解决了,Stack Overflow 上也有一次类似的问题, ...
- 今天用node的cheerio模块做了个某乎的爬虫
一时兴起,想做个爬虫,经过各种深思熟虑,最后选择了某乎,毕竟现在某乎的数据质量还是挺高的.说干就干 打开某乎首页,随便搜索了一串关键字,相关的问题和答案就展现在眼前,我就思考怎么把这些搜索结果 ...
- Bootstrap-datepicker3官方文档中文翻译---概述(原版翻译 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)
bootstrap-datepicker Bootstrap-datepicker 提供了一个拥有Bootstrap样式的弹性Datepicker控件 Requirements/使用要求 Bootst ...
- Servlet,JSP 中的中文乱码问题以及解决方案
问题描述: 在Servlet,JSP 传递数据中,英文无影响,而中文有时候就会出现乱码. 解决方案: 相同的编码: 同一个项目中的每个文件应当设置和保存相同的编码方式,如: html中 <met ...
- Python入门 - 环境搭建
因为本人用的mac系统,所以这里只演示mac系统下python环境的搭建,至于windows和linux系统有类似安装过程,可以参考官方文档. 第一步: 安装python3.6 # Mac OS X ...