介绍
bootstrap-treeview-node 是一个基于 Bootstrap 的树形结构组件，可以帮助前端开发者快速地创建一个美观、易用的树形结构。它的主要特点如下：
- 支持树形结构的展开和折叠。
- 支持异步加载子节点数据，减少首次加载的时间。
- 支持搜索节点以及高亮显示搜索结果。
- 支持拖拽节点以及排序节点。
本篇文章将带领大家一步步学习 bootstrap-treeview-node 的使用方法，从安装到基本功能的实现，最后将会提供一个完整的示例代码。本文章内容详细，可供初学者参考学习，同时也有一定深度和指导意义。
安装
为了使用 bootstrap-treeview-node，我们需要先安装 Node.js 和 npm。安装方法可以去官网查看，这里不再赘述。
安装完成之后，我们可以在项目根目录下使用以下命令安装 bootstrap-treeview-node：
npm install bootstrap-treeview-node --save
通过以上命令，会将 bootstrap-treeview-node 安装在项目中，并将其添加到 package.json 中的 dependencies 中。
基本用法
引入文件
在首先我们需要引入 bootstrap-treeview-node：
<link rel="stylesheet" href="node_modules/bootstrap-treeview-node/dist/bootstrap-treeview.min.css"> <script src="node_modules/bootstrap-treeview-node/dist/bootstrap-treeview.min.js"></script>
HTML 结构
接下来，我们需要生成一个 HTML 结构，用来容纳 bootstrap-treeview：
<div id="tree"></div>
初始化
接下来我们需要初始化 bootstrap-treeview：
$('#tree').treeview({
data: [],
});以上代码中，我们传入一个空数组作为数据，这是一个最简单的 bootstrap-treeview。如果我们需要在树形结构中添加一些数据，则需要将数据添加至数组中。
功能
添加节点
我们可以通过以下代码向 bootstrap-treeview 中添加节点：
-- -------------------- ---- -------
------------------------------ -
-
----- ------- ---
------ -
-
----- ------ ---
--
-
----- ------ ---
--
--
--
---以上代码中，我们向树形结构中添加了一个父节点和两个子节点。
删除节点
我们可以通过以下代码删除树形结构中的节点：
$('#tree').treeview('removeNode', node);在以上代码中，我们将需要删除的节点传递到了 removeNode 的第二个参数中。
编辑节点
我们可以通过以下代码编辑树形结构中的节点：
$('#tree').treeview('editNode', [nodeId, {
text: 'New node text',
}]);以上代码中，我们将需要编辑的节点的 ID 和新的节点文本传递到了 editNode 的第一个参数和第二个参数中。
查询节点
我们可以通过以下代码查询树形结构中的节点：
const nodes = $('#tree').treeview('search', ['node text']);以上代码中，我们将需要查询的节点文本传递到了 search 的第一个参数中，并将返回的节点存储在了 nodes 变量中。
拖拽节点
我们可以通过以下代码实现节点的拖拽：
-- -------------------- ---- -------
---------------------
----- ---
----------- -----
------------ -----
------------ -----
-------------- --------------- ----- -
-- ----------
--
---在以上代码中，我们通过将 dragAndDrop 属性设置为 true，开启了节点的拖拽功能，并可以通过 onNodeDropped 回调函数实现拖拽结束后的操作。
示例代码
下面是一个基于 bootstrap-treeview-node 的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------ ------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
---- ----------------
------- ------------------------------------------------------
------- -----------------------------------------------------------------------------------
--------
----- -------- - -
-
----- ------- ---
------ -
-
----- ------ ---
--
-
----- ------ ---
--
--
--
--
---------------------
----- ---------
----------- -----
------------ -----
------------ -----
---
---------
-------
-------通过以上的代码，我们可以看到一个简单的树形结构，其中包含了一个父节点和两个子节点，同时开启了节点的拖拽功能。我们也可以对代码进行修改，来实现更加复杂的树形结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4dd5