在前端开发中，我们经常会遇到需要对 DOM 元素进行树形结构展示的需求，比如网站的导航菜单、文件目录、问题列表等等。针对这个需求，我们可以使用 boxtree 这个 npm 包来构建出树形结构展示的组件。
boxtree 简介
boxtree 是一个小巧的 JavaScript 库，其主要作用是将一组数据构建成树形结构，并以 HTML、CSS 的形式展示出来。它可以帮助我们轻松地构建各种树形结构的组件，而且非常灵活易用。
boxtree 的安装和使用
使用 boxtree 的第一步是安装它。我们可以通过 npm 命令来安装：
npm install --save boxtree
安装成功后，我们就可以在代码中使用 boxtree 了。假设我们有一个由数组表示的树形数据结构：
-- -------------------- ---- -------
----- -------- - -
-
--- --
----- -------
--------- -
-
--- --
----- -------
--
-
--- --
----- -------
--
--
--
-
--- --
----- -------
--------- -
-
--- --
----- -------
--------- -
-
--- --
----- -------
--
--
--
-
--- --
----- -------
--
--
--
--我们可以使用 boxtree 将它构建成树形结构，并以 HTML、CSS 的形式展示出来：
import { BoxTree } from 'boxtree';
const tree = new BoxTree({
container: document.getElementById('tree-container'),
data: treeData,
itemRenderer: (item) => `<div>${item.name}</div>`,
});在上面的代码中，我们先通过 import 引入了 boxtree 库，并创建了一个 BoxTree 实例。在这个实例中，我们指定了 container、data 和 itemRenderer 三个参数。其中：
container：表示树形结构要展示的容器元素。data：表示树形结构的数据，可以是一个数组或一个对象。itemRenderer：表示每个树形节点要呈现的 HTML 内容，它是一个回调函数，接受一个参数item，表示每个节点对应的数据项。我们可以将item中的数据渲染成 HTML 标签并返回。
boxtree 的选项和方法
除了上面介绍的参数外，boxtree 还提供了一些选项和方法，以方便我们自定义和操作树形结构。
选项
itemHeight：表示每个树形节点的高度，单位为像素，默认为 30。expanderTemplate：表示展开/收起节点的按钮的 HTML 模板。如果不想使用默认的按钮，则可以自定义它的 HTML 内容。
方法
expandAll()：展开所有节点。collapseAll()：收起所有节点。findNodeById(id)：根据节点的 ID 查找节点，返回一个对象，包含该节点的 DOM 元素和数据项。selectNodeById(id)：根据节点的 ID 选中节点。unselectNodeById(id)：根据节点的 ID 取消选中节点。toggleNodeById(id)：根据节点的 ID 切换节点的展开/收起状态。
通过这些选项和方法，我们可以更加灵活地操纵 boxtree 构建出的树形结构。
示例代码
下面是一个完整的示例代码，展示了如何使用 boxtree 构建一个简单的树形菜单：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------
-------
------------- -
------------- -----
--------- ---------
-
-------------------- -
-------- ---
--------- ---------
----- --
---- --
------- --
------ ----
----------------- -----
-
-------------------- -
-------- ---
--------- ---------
----- --
---- ----
------------------ -----------------
---------- -----------------
------ ----
------- -----
----------------- -----
-
----------------- -
------ -----
------- -----
--------- ---------
----- ------
---- ----
----------- -----
-------------- ----
----------------- -----
------- --------
-
------------------------------ -
----------------- -----------------------
------------------ ----------
-------------------- -------
---------------- --- ----
-
-------------------------- -
----------------- ----------------------
-
---------------------- -
----------------- -----
-
---------------------- -
----------------- --------
-
--------
-------
------
---- ----------------
------- ------------------------------------------------------------------------
--------
----- -------- - -
-
--- ----
----- ------
--------- -
-
--- -----
----- -------
--
-
--- -----
----- -------
--
-
--- -----
----- -------
--
--
--
-
--- ----
----- ------
--------- -
-
--- -----
----- -------
--
-
--- -----
----- -------
--
--
--
-
--- ----
----- ------
--
--
----- ---- - --- ---------
---------- --------------------------------
----- ---------
----------- ---
----------------- ----- ---------------------------------
------------- ------ -- -
---- ---------------------
---- ----------------------- --
------------- - -------------- - -----------
-----------------------
------
--
---
---------------------------------------- ------- -- -
----- ---- - ------------------------------------ ----------------
-- ------ -
----- -- - ----------------
------------------------
-
---
---------
-------
-------在这个示例代码中，我们通过 boxtree 构建了一个树形菜单，它包含了三个一级菜单和若干个二级菜单。我们使用了 itemHeight 和 expanderTemplate 两个选项，并自定义了每个节点的 HTML 内容。同时，我们在菜单的 DOM 元素上绑定了点击事件，通过 toggleNodeById 方法实现了菜单节点的展开/收起功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4e6e