ztree搜索节点并展开
程序员文章站
2022-03-30 22:17:16
web js 第一种 点击查询按钮执行 第二种 去掉查询按钮, input框变化就执行 searchNodes方法与其他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的方法是平级的
下一篇: 搜索与回溯框架(自用)