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