使用jquery编写代码,要求搜索框输入时将ztree的树隐藏并在相同位置以列表显示符合搜索条件的数据,麻烦给出案例代码,需要测试数据
时间: 2024-05-11 16:14:57 浏览: 99
(附数据库脚本)jQuery Ztree实例
5星 · 资源好评率100%
好的,以下是一个使用jquery实现搜索框输入时将ztree的树隐藏并在相同位置以列表显示符合搜索条件的数据的案例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框与ztree</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.49/css/zTreeStyle/zTreeStyle.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.49/js/jquery.ztree.core.min.js"></script>
<style>
#search-input {
width: 200px;
height: 30px;
margin: 20px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
#list-container {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.list-item {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f8f8f8;
}
.list-item:hover {
background-color: #eaeaea;
}
</style>
</head>
<body>
<input id="search-input" type="text" placeholder="请输入搜索内容">
<div id="list-container"></div>
<div id="tree-container" class="ztree"></div>
<script>
// 测试数据
var testData = [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 25},
{id: 3, name: '王五', age: 30},
{id: 4, name: '赵六', age: 35},
{id: 5, name: '钱七', age: 40},
];
// 初始化ztree
var setting = {};
var zNodes = [
{id: 1, pId: 0, name: "父节点1", open: true},
{id: 11, pId: 1, name: "子节点1"},
{id: 12, pId: 1, name: "子节点2"},
{id: 13, pId: 1, name: "子节点3"},
{id: 2, pId: 0, name: "父节点2", open: true},
{id: 21, pId: 2, name: "子节点1"},
{id: 22, pId: 2, name: "子节点2"},
{id: 23, pId: 2, name: "子节点3"},
];
$.fn.zTree.init($("#tree-container"), setting, zNodes);
// 绑定搜索框输入事件
$("#search-input").on('input', function () {
var keyword = $(this).val();
var result = testData.filter(function (item) {
return item.name.includes(keyword);
});
// 隐藏ztree
$("#tree-container").hide();
// 渲染列表
var html = '';
result.forEach(function (item) {
html += '<div class="list-item">' + item.name + ',' + item.age + '岁' + '</div>';
});
$("#list-container").html(html);
});
</script>
</body>
</html>
```
以上代码可以实现搜索框输入时将ztree的树隐藏并在相同位置以列表显示符合搜索条件的数据的功能。测试数据为一个包含姓名和年龄的数组,搜索框支持根据姓名进行模糊搜索。
阅读全文