bootstrap treeview 树形菜单带复选框及级联选择功能

Bootstrap Treeview 树形菜单带复选框及级联选择功能

Bootstrap Treeview 是一个基于 Bootstrap 的 jQuery 插件，可以用来创建树形菜单，并且支持复选框及级联选择功能。

下面是具体的使用步骤。

步骤一：引入依赖资源

在 HTML 文件中引入插件的 CSS 和 JavaScript：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

步骤二：创建 HTML 结构

在 HTML 文件中创建一个容器，用于放置树形菜单：

<div id="treeview"></div>

步骤三：配置选项

创建一个 JavaScript 对象，用于配置树形菜单的选项：

var options = {
    data: [
        {
            text: "Parent 1",
            nodes: [
                {
                    text: "Child 1",
                    nodes: [
                        {
                            text: "Grandchild 1",
                            state: {
                                checked: true
                            }
                        },
                        {
                            text: "Grandchild 2"
                        }
                    ]
                },
                {
                    text: "Child 2"
                }
            ]
        },
        {
            text: "Parent 2"
        }
    ],
    showCheckbox: true,
    highlightSelected: true,
    levels: 3,
    onNodeChecked: function(event, data) {
        // 节点选中时的回调函数
    },
    onNodeUnchecked: function(event, data) {
        // 节点取消选中时的回调函数
    }
};

在上述配置项中，data 用于指定菜单数据，showCheckbox 表示是否显示复选框，highlightSelected 表示是否高亮选中节点，levels 表示最多显示几级菜单，onNodeChecked 和 onNodeUnchecked 分别是节点选中和取消选中时的回调函数。

步骤四：初始化插件

在 JavaScript 文件中初始化插件：

$('#treeview').treeview(options);

示例一：使用 AJAX 加载数据

下面的示例展示如何使用 AJAX 加载数据：

var options = {
    showCheckbox: true,
    highlightSelected: true,
    levels: 3,
    data: function(options, callback) {
        $.getJSON('data.json', function(data) {
            callback(data);
        });
    }
};

在上面的示例中，通过 data 选项使用一个函数来返回数据，函数中通过 $.getJSON 函数异步加载数据。

示例二：使用本地数据

下面的示例展示如何使用本地数据：

var options = {
    showCheckbox: true,
    highlightSelected: true,
    levels: 3,
    data: [
        {
            text: "Parent 1",
            nodes: [
                {
                    text: "Child 1",
                    nodes: [
                        {
                            text: "Grandchild 1",
                            state: {
                                checked: true
                            }
                        },
                        {
                            text: "Grandchild 2"
                        }
                    ]
                },
                {
                    text: "Child 2"
                }
            ]
        },
        {
            text: "Parent 2"
        }
    ]
};

在上面的示例中，通过 data 选项直接指定数据。

完整代码

最后，下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Treeview</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
</head>
<body>

    <div id="treeview"></div>

    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
    <script>
        $(function() {
            var options = {
                showCheckbox: true,
                highlightSelected: true,
                levels: 3,
                data: [
                    {
                        text: "Parent 1",
                        nodes: [
                            {
                                text: "Child 1",
                                nodes: [
                                    {
                                        text: "Grandchild 1",
                                        state: {
                                            checked: true
                                        }
                                    },
                                    {
                                        text: "Grandchild 2"
                                    }
                                ]
                            },
                            {
                                text: "Child 2"
                            }
                        ]
                    },
                    {
                        text: "Parent 2"
                    }
                ],
                onNodeChecked: function(event, data) {
                    alert('节点选中了：' + data.text);
                },
                onNodeUnchecked: function(event, data) {
                    alert('节点取消选中了：' + data.text);
                }
            };
            $('#treeview').treeview(options);
        });
    </script>

</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：bootstrap treeview 树形菜单带复选框及级联选择功能 - Python技术站