JS树形菜单组件Bootstrap TreeView使用方法详解

下面我将详细讲解使用JS树形菜单组件Bootstrap TreeView的方法及示例。

Bootstrap TreeView简介

Bootstrap TreeView是一个基于Bootstrap的树形插件，可以用于创建树形目录、提供搜索功能，支持动态加载数据、拖拽排序等常见的树形操作。

使用步骤

1. 引入必要的文件

Bootstrap TreeView依赖于jQuery和Bootstrap，需要引入相关文件：

<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入Bootstrap -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- 引入Bootstrap TreeView -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

2. 创建HTML结构

创建一个HTML容器来放置树形菜单：

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

3. 初始化树形菜单

在容器中调用treeview()方法来初始化树形菜单，方法中需要传入一个选项对象，用来配置树形菜单的各项属性：

$('#tree').treeview({
  data: data,
  showBorder: false,
  selectedBackColor: '#007bff',
  enableLinks: true
});

其中data是一个JSON对象，用来存储树形结构的数据，showBorder表示是否显示边框，selectedBackColor表示选中状态的背景色，enableLinks表示是否启用链接。更多选项可以参见官方文档。

4. 渲染数据

树形菜单的数据可以通过JS动态获取，也可以事先写好，存储在数据文件中，例如data.json：

[
  {
    "text": "父节点1",
    "nodes": [
      {
        "text": "子节点1"
      },
      {
        "text": "子节点2"
      }
    ]
  },
  {
    "text": "父节点2",
    "nodes": [
      {
        "text": "子节点3"
      },
      {
        "text": "子节点4"
      }
    ]
  }
]

通过Ajax请求获取数据并渲染：

$.ajax({
  url: 'data.json',
  async: false,
  success: function(data) {
    $('#tree').treeview({
      data: data,
      showBorder: false,
      selectedBackColor: '#007bff',
      enableLinks: true
    });
  }
});

示例

示例1：基础树形菜单

HTML代码：

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

JavaScript代码：

var data = [
  {
    text: '父节点1',
    nodes: [
      {
        text: '子节点1'
      },
      {
        text: '子节点2'
      }
    ]
  },
  {
    text: '父节点2',
    nodes: [
      {
        text: '子节点3'
      },
      {
        text: '子节点4'
      }
    ]
  }
];

$(function() {
  $('#tree').treeview({
    data: data,
    showBorder: false,
    selectedBackColor: '#007bff',
    enableLinks: true
  });
});

示例2：动态加载树形菜单

HTML代码：

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

JavaScript代码：

$(function() {
  $('#tree').treeview({
    data: [],
    showBorder: false,
    selectedBackColor: '#007bff',
    enableLinks: true,
    onNodeSelected: function(event, data) {
      if (data.href) {
        window.open(data.href, '_blank');
      }
    },
    onExpand: function(event, data) {
      if (data.nodes.length == 1 && data.nodes[0].text === '') {
        loadData(data);
      }
    }
  });

  function loadData(parent) {
    $.ajax({
      url: 'data.php',
      dataType: 'json',
      data: {parentId: parent.id},
      success: function(data) {
        parent.nodes = data;

        $('#tree').treeview('expandNode', parent.nodeId);
      }
    });
  }

  loadData({id: 0, nodeId: null});
});

其中data.php返回的数据格式与示例1的数据文件格式相同。当展开一个节点时，如果该节点还没有子节点，会异步请求数据，并将获取到的数据渲染到该节点下。如果点击了带有href属性的节点，则会在新窗口中打开该链接。