首页使用zTree编写代码满足以下要求左边一个检索框，底下一棵树，右边显示选中数据检索框输入数据后自动更新显示满足条件的数据列表

使用zTree编写代码满足以下要求左边一个检索框，底下一棵树，右边显示选中数据检索框输入数据后自动更新显示满足条件的数据列表

时间: 2024-06-06 10:10:39 浏览: 125

<!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>

阅读全文