ztree搜索节点并展开

2019-04-18 08:54:31来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 


原文链接:https://www.cnblogs.com/gczmn/p/10718967.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:1#认识Java

下一篇:Java静态数据的初始化