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