使用zTree编写代码满足以下要求左边一个检索框,底下一棵树,右边显示选中数据 检索框输入数据后自动更新显示满足条件的数据列表
时间: 2024-06-06 21:10:39 浏览: 120
带搜索框的ztree
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zTree Demo</title>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>
</head>
<body>
<input type="text" id="searchInput" placeholder="请输入搜索内容">
<div id="tree"></div>
<div id="selectedData"></div>
<script>
// 定义zTree数据
var zTreeNodes = [
{ id:1, pId:0, name:"节点1" },
{ id:2, pId:0, name:"节点2" },
{ id:3, pId:1, name:"节点1-1" },
{ id:4, pId:1, name:"节点1-2" },
{ id:5, pId:2, name:"节点2-1" },
{ id:6, pId:2, name:"节点2-2" }
];
// 初始化zTree
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
// 搜索框输入事件
$("#searchInput").on("input", function(){
var keyword = $(this).val();
// 获取满足条件的节点
var nodes = zTreeObj.getNodesByParamFuzzy("name", keyword, null);
// 更新树节点显示
zTreeObj.hideNodes(zTreeObj.getNodes());
zTreeObj.showNodes(nodes);
// 更新选中数据显示
var selectedData = "";
for(var i=0; i<nodes.length; i++){
selectedData += nodes[i].name + "<br>";
}
$("#selectedData").html(selectedData);
});
</script>
</body>
</html>
阅读全文