Bootstrap、jQuery 和 Bootstrap-treeview 实现无限级菜单树和父子节点的选中功能

2023-09-24 11:57:21

前言

Bootstrap 是一个流行的前端框架，提供了一系列样式表、JavaScript 组件和 HTML 模板，帮助开发者快速构建响应式网站和应用程序。jQuery 是一个 JavaScript 库，为 JavaScript 提供了强大的工具集，简化了 DOM 操作、事件处理和动画等任务。Bootstrap-treeview 是一个 jQuery 插件，用于创建美观的树形菜单。

搭建环境

在开始之前，确保您已经安装了以下软件：

Node.js 和 npm
Bootstrap
jQuery
Bootstrap-treeview

创建基本项目结构

使用 npm 创建一个新的项目：

npm init -y

安装必要的依赖项：

npm install bootstrap jquery bootstrap-treeview

在项目目录中创建一个 index.html 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
</head>
<body>
  <div id="tree"></div>

  <script>
    $(function() {
      // 初始化树形菜单
      $('#tree').treeview({
        data: [
          {
            text: 'Parent Node 1',
            nodes: [
              {
                text: 'Child Node 1',
              },
              {
                text: 'Child Node 2',
              }
            ]
          },
          {
            text: 'Parent Node 2',
            nodes: [
              {
                text: 'Child Node 3',
              },
              {
                text: 'Child Node 4',
              }
            ]
          }
        ]
      });
    });
  </script>
</body>
</html>

在项目目录中创建一个 style.css 文件，并添加以下代码：

body {
  font-family: Arial, sans-serif;
}

.treeview .list-group-item {
  cursor: pointer;
}

.treeview .list-group-item:hover {
  background-color: #eee;
}

.treeview .list-group-item.active {
  background-color: #428bca;
  color: #fff;
}

重构原始数据

假设您从后端获取了一个 JSON 数组，其中包含菜单树的数据。该数组可能如下所示：

[
  {
    id: 1,
    parent_id: null,
    name: 'Parent Node 1'
  },
  {
    id: 2,
    parent_id: 1,
    name: 'Child Node 1'
  },
  {
    id: 3,
    parent_id: 1,
    name: 'Child Node 2'
  },
  {
    id: 4,
    parent_id: null,
    name: 'Parent Node 2'
  },
  {
    id: 5,
    parent_id: 4,
    name: 'Child Node 3'
  },
  {
    id: 6,
    parent_id: 4,
    name: 'Child Node 4'
  }
]

为了让数据与 Bootstrap-treeview 兼容，我们需要将其重构为如下格式：

[
  {
    text: 'Parent Node 1',
    nodes: [
      {
        text: 'Child Node 1',
      },
      {
        text: 'Child Node 2',
      }
    ]
  },
  {
    text: 'Parent Node 2',
    nodes: [
      {
        text: 'Child Node 3',
      },
      {
        text: 'Child Node 4',
      }
    ]
  }
]

您可以使用 JavaScript 中的 map() 和 reduce() 方法来轻松地完成此转换。

渲染树形菜单

现在我们可以使用 Bootstrap-treeview 插件来渲染树形菜单。在您的 index.html 文件中，找到以下代码：

<div id="tree"></div>

并将其替换为：

<div id="tree" data-toggle="treeview"></div>

然后，在您的 script 标签中，找到以下代码：

$('#tree').treeview({
  data: [
    {
      text: 'Parent Node 1',
      nodes: [
        {
          text: 'Child Node 1',
        },
        {
          text: 'Child Node 2',
        }
      ]
    },
    {
      text: 'Parent Node 2',
      nodes: [
        {
          text: 'Child Node 3',
        },
        {
          text: 'Child Node 4',
        }
      ]
    }
  ]
});

并将其替换为：

$('#tree').treeview({
  data: processedData
});

其中，processedData 是您重构后的数据。

现在，当您打开 index.html 文件时，您应该会看到一个带有勾选框的树形菜单。您可以通过单击勾选框来选中或取消选中节点。

处理选中的节点数据

当您选中或取消选中节点时，Bootstrap-treeview 会触发一个 selected 事件。您可以使用此事件来处理选中的节点数据。

在您的 script 标签中，找到以下代码：

$('#tree').on('selected', function(event, node) {
  console.log(node);
});

然后，您可以使用 node 对象来获取选中的节点数据。

构建后端所需的数据结构

假设您需要将选中的节点数据发送到后端。您可以使用以下代码来构建后端所需的数据结构：

var selectedNodes = [];

$('#tree').on('selected', function(event, node) {
  selectedNodes.push(node.id);
});

$.ajax({
  url: '/save_selected_nodes',
  method: 'POST',
  data: {
    selected_nodes: selectedNodes
  }
});

在上面的代码中，我们使用 selectedNodes 数组来存储选中的节点 ID。然后，我们使用 jQuery 的 $.ajax() 方法将数据发送到后端。

总结

在本文中，我们介绍了如何使用 Bootstrap、jQuery 和 Bootstrap-treeview 来创建无限级菜单树，并实现父子节点的选中功能。我们还介绍了如何重构原始数据以匹配 Bootstrap-treeview 所需的数据结构，以及如何处理选中的节点数据以满足后端的要求。希望本文对您有所帮助。