web

<div class="zTreeC">
<div class="searchL" lay-filter="searchL" style="background:none;">
<form class="layui-form clearF">
<div class="input-group input-group-sm float-left" style="margin-left:5px;">
<div class="layui-input-inline">
<input id="keyword" name="" tag="" class="layui-input"
type="text" placeholder="请输入名称搜索" autocomplete="off" />
</div>
</div>
<div class="float-right minor-btns">
<button type="button" id="search" class="btn btn-pr btn-sm publicButton">搜索</button>
</div> </form> </div>
<div id="treeNode" class="ztree "></div>
</div>

js   第一种  点击查询按钮执行

//条件搜索    节点选中并显示信息
$("#search").click(searchNodes);
function searchNodes(){
var treeObj = $.fn.zTree.getZTreeObj("treeNode");
var keyword=$("#keyword").val();
var nodes = treeObj.getNodesByParamFuzzy("name", keyword, null); //根据节点数据的属性搜索,获取条件模糊匹配的节点数据 JSON 对象集合,(keywords)模糊匹配只能针对 String 类型的数据
for(var i = nodes.length-1; i >= 0; i--) {
treeObj.selectNode(nodes[i]); //会让节点自动滚到到可视区域内
}
//显示第一个选中的节点信息
dataItemId = nodes[0].id;
fun.search();//查询节点信息的方法
}

第二种  去掉查询按钮, input框变化就执行

document.getElementById("keyword").addEventListener("input", test, false);
function searchNodes(){
  var treeObj = $.fn.zTree.getZTreeObj("treeNode");
  var keywords=$("#keyword").val();
  var nodes = treeObj.getNodesByParamFuzzy("name", keywords, null);
  for(var i = nodes.length-1; i >= 0; i--) {
treeObj.selectNode(nodes[i]); //会让节点自动滚到到可视区域内
}
  //显示第一个选中的节点信息
dataItemId = nodes[0].id;
fun.search();//查询节点信息的方法
} 

searchNodes方法与其他ztree的方法是平级的

ztree搜索节点并展开的更多相关文章

  1. 通过ajax 后台传递的 区域id 选中ztree的节点 并展开节点

    代码如下: < script type = "text/javascript" >    var flag = "<%=request.getParam ...

  2. 关于点击ztree的节点将页面生成到easyui的新增选项卡(easyui-tabs)时,总是在浏览器中生成一个新的页面的问题

    最近的项目中用到了easyui,还有ztree菜单.在这里将我遇到的一些问题写出来算是做个笔记吧. 这是我头一次在博客园里分享代码,我的处女作,写的不好的地方还望各位见谅! 由于很久没有写过前台的东西 ...

  3. 自写 zTree搜索功能 -- 关键字查询 -- 递归无限层

    唠叨一哈 前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写zTree的搜索方法去了.为什么呢?因为我说了句“找不到是不可 ...

  4. jquery zTree搜索高亮的例子

    思路: 搜索的时候发请求到后台,后台根据关键字找到匹配的节点,并将这些节点添加一个标志light: 后面就根据这个light为true就高亮,false就不高亮: 后台将这些节点返回到前台,前台展示: ...

  5. zTree搜索

    自写 zTree搜索功能 -- 关键字查询 -- 递归无限层 唠叨一哈 前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写 ...

  6. zTree实现节点修改的实时刷新

    一.应用场景 在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了. 二.项目实践   比如要在test1234节点下新建子节点,首先要选中test1234节点,添 ...

  7. delphi 保存 和 打开 TREE VIEW的节点已经展开的状态

    保存 和 打开 TREE VIEW的节点已经展开的状态 如果每次打开后能自动读取上次展开的状态就会非常快捷 下载地址: 实现方法 将已经展开的节点索引 放在一个文本中最后选中的那个节点索引放在最后一位 ...

  8. ztree设置节点checked,选中某节点等相关操作

    ztree设置节点checked,选中某节点等相关操作 1.根据id获取树的某个节点: var zTree = $.fn.zTree.getZTreeObj("mytree"); ...

  9. 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

随机推荐

  1. MySQL 数据库死锁

    数据库死锁 死锁的解决办法(1) 执行下面SQL,先查看哪些表被锁住了: select b.owner,b.object_name,a.session_id,a.locked_mode from v$ ...

  2. JS Bootstrap-DateRangePicker 如何设置默认值为空

    DateRangePicker是一款时间范围选择器,界面良好,非常适合短时间范围选择的插件,具体源码可以在http://www.daterangepicker.com/找到 ,但是目前使用中,感觉功能 ...

  3. class基本使用

    console.log(` 1.创建一个空对象 2.让this 指向刚刚创建好的空对象 3.执行构造函数内的代码 (为相关的属性和方法赋值) 4.返回创建好的对象`) // 1.创建一个空对象 // ...

  4. eureka2.0页面404报错问题--之坑

    eureka页面报错问题404页面如下 在复制pom文件的时候,记得启动eureka注册中心的pom文件引入依赖是否正确 启动类注解也要注意是否引用正确

  5. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  6. 文本分布式表示(三):用gensim训练word2vec词向量

    今天参考网上的博客,用gensim训练了word2vec词向量.训练的语料是著名科幻小说<三体>,这部小说我一直没有看,所以这次拿来折腾一下. <三体>这本小说里有不少人名和一 ...

  7. python爬虫–爬取煎蛋网妹子图片

    前几天刚学了python网络编程,书里没什么实践项目,只好到网上找点东西做. 一直对爬虫很好奇,所以不妨从爬虫先入手吧. Python版本:3.6 这是我看的教程:Python - Jack -Cui ...

  8. 【Android Studio安装部署系列】十五、Android studio添加Assets目录

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio新建项目时是没有assets目录,需要自己手动创建. app右键——New——Folder——Asset ...

  9. docker~docker-compose的使用

    回到目录 docker-compose是用来在Docker中定义和运行复杂应用的工具,比如在一个yum文件里定义多个容器,只用一行命令就可以让一切就绪并运行. 使用docker compose我们可以 ...

  10. 使用 ASP.NET Core MVC 创建 Web API(一)

    从今天开始来学习如何在 ASP.NET Core 中构建 Web API 以及每项功能的最佳适用场景.关于此次示例的数据库创建请参考<学习ASP.NET Core Razor 编程系列一> ...