zoukankan      html  css  js  c++  java
  • ztree搜索节点并展开

    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的方法是平级的

  • 相关阅读:
    CentOS 7,使用yum安装Nginx
    2019年6月Github最新开源java项目
    SQL Server清空数据库中ldf日志文件
    Spring Boot中使用 Thymeleaf
    Excel中使用Power Query获取网页json数据
    “工作做得越好,活越多,还不如偷懒?”这取决于你的目标
    Tomcat权威指南(第二版)下载pdf 高清完整中文版-百度云下载
    基于Xposed hook 实时监测微信消息
    Kotlin学习入门笔记
    批处理运行Vstest并生成HTML报告
  • 原文地址:https://www.cnblogs.com/gczmn/p/10718967.html
Copyright © 2011-2022 走看看