如何实现Bootstrap Treeview的动态数据加载与快捷搜索功能？-酷北运营网

Bootstrap Treeview 实现动态加载数据并添加快捷搜索功能

在现代Web开发中，使用树形视图（Treeview）来展示层级数据是一种常见的需求，Bootstrap Treeview是一个流行的前端库，用于创建和管理树形结构的数据，本文将介绍如何使用Bootstrap Treeview实现动态加载数据和添加快捷搜索功能。

一、引入Bootstrap Treeview

我们需要在项目中引入Bootstrap Treeview的CSS和JS文件，可以通过CDN或者下载到本地进行引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Treeview Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/css/bootstrap-treeview.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2>Bootstrap Treeview Example</h2>
        <input type="text" id="searchInput" class="form-control mb-3" placeholder="Search...">
        <div id="tree"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/js/bootstrap-treeview.min.js"></script>
</body>
</html>

二、初始化树形视图

我们初始化一个简单的树形视图，可以在<script>标签内添加以下代码：

$(document).ready(function() {
    var treeData = [
        {
            text: "Parent 1",
            nodes: [
                {
                    text: "Child 1",
                    nodes: [
                        {
                            text: "Grandchild 1"
                        }
                    ]
                },
                {
                    text: "Child 2"
                }
            ]
        },
        {
            text: "Parent 2"
        }
    ];
    $('#tree').treeview({
        data: treeData,
        levels: 2,
        expandIcon: 'fa fa-folder-open',
        collapseIcon: 'fa fa-folder',
        nodeIcon: 'fa fa-file'
    });
});

三、动态加载数据

为了实现动态加载数据，我们可以使用AJAX请求从服务器获取数据，假设我们有一个API端点/api/getTreeData，返回JSON格式的树形数据。

function loadTreeData() {
    $.ajax({
        url: '/api/getTreeData',
        method: 'GET',
        success: function(data) {
            $('#tree').treeview({
                data: data,
                levels: 2,
                expandIcon: 'fa fa-folder-open',
                collapseIcon: 'fa fa-folder',
                nodeIcon: 'fa fa-file'
            });
        },
        error: function(error) {
            console.log('Error loading tree data:', error);
        }
    });
}
// 初次加载时调用函数
loadTreeData();

四、添加快捷搜索功能

为了实现快捷搜索功能，我们可以监听输入框的变化事件，并根据输入的内容过滤树形数据。

$('#searchInput').on('input', function() {
    var searchTerm = $(this).val().toLowerCase();
    $('#tree').treeview({
        data: filterTreeData(treeData, searchTerm),
        levels: 2,
        expandIcon: 'fa fa-folder-open',
        collapseIcon: 'fa fa-folder',
        nodeIcon: 'fa fa-file'
    });
});
function filterTreeData(data, searchTerm) {
    if (!searchTerm) return data;
    return data.filter(function(node) {
        return node.text.toLowerCase().includes(searchTerm);
    }).map(function(node) {
        if (node.nodes) {
            node.nodes = filterTreeData(node.nodes, searchTerm);
        }
        return node;
    });
}