前言
在前端开发中，树形结构的展示是比较常见的需求。而 Bootstrap Tree View 是一个优秀的树形结构展示插件，然而在使用时还需要手动引入 Bootstrap 的相关样式，比较繁琐。因此，我们可以使用一个专门对 Bootstrap Tree View 进行了封装的 npm 包 bootstrap-treeview-npm，方便我们快速引入。
安装
使用 npm 进行安装：
npm install bootstrap-treeview-npm --save
使用
基本使用
在你的项目中引入 Bootstrap Tree View：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-treeview-npm@5.0.0/dist/bootstrap-treeview.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap-treeview-npm@5.0.0/dist/bootstrap-treeview.min.js"></script>
然后编写 data 数组，配置树形结构的数据源：
-- -------------------- ---- -------
--- ---- - -
-
----- ------- ---
------ -
-
----- ------ ---
------ -
-
----- ----------- --
--
-
----- ----------- --
-
-
--
-
----- ------ --
-
-
--
-
----- ------- --
--
-
----- ------- --
-
--
------------------------------ -------在页面上创建一个具有 ID 为 treeview 的空元素：
<div id="treeview"></div>
这样，你就可以在前端页面成功展示一个树形结构。
高级使用
自定义图标
Bootstrap Tree View 默认提供了几种图标作为展示，但是我们也可以自定义图标。只需要在数据源中添加 icon 属性即可：
-- -------------------- ---- -------
--- ---- - -
-
----- ------- ---
----- ---------- -----------------------
------ -
-
----- ------ ---
----- ---------- ----------------
------ -
-
----- ----------- ---
----- ---------- ---------------
--
-
----- ----------- ---
----- ---------- ---------------
-
-
--
-
----- ------ ---
----- ---------- ---------------
-
-
--
-
----- ------- ---
----- ---------- ---------------
--
-
----- ------- ---
----- ---------- ---------------
-
--勾选状态下的回调函数
Bootstrap Tree View 支持勾选状态下的回调函数，例如，我们可以在勾选某个节点的时候提示信息：
-- -------------------- ---- -------
--- ------- - -
-------------- --------------- ----- -
--------------- - - -----------
--
---------------- --------------- ----- -
----------------- - - -----------
-
--
----------------------------------------- ------ --------支持搜索
Bootstrap Tree View 支持搜索功能，只需要添加一个搜索框即可：
<input type="text" class="form-control" id="tree-search" placeholder="Search...">
在 JavaScript 中通过添加 searchable 属性启用搜索功能：
$('#treeview').treeview({data: data, searchable: true, searchField: $('#tree-search')});这样，用户就可以在页面上搜索出指定的节点。
总结
通过本篇文章，我们学会了如何使用 npm 包 bootstrap-treeview-npm 来快速引入 Bootstrap Tree View 插件，并进行了高级使用的讲解。希望这篇文章对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4dd4