npm 包 hierarchical-model-editor 是一款用于展示和编辑层次结构模型的前端工具，可以帮助开发者更好地管理和修改层次结构数据。本文将介绍该工具的详细使用教程。
安装和引入
首先，我们需要安装该工具，可以使用 npm 命令进行安装：
npm install hierarchical-model-editor
安装完成后，我们可以将该工具引入到我们的项目中：
import HierarchicalModelEditor from 'hierarchical-model-editor';
基本使用
使用 HierarchicalModelEditor 工具，我们可以创建一个层次结构模型编辑器：
-- -------------------- ---- -------
----- ----------- - -
--- --
----- -------
--------- -
-
--- --
----- --------
--
-
--- --
----- ---------
--------- -
-
--- --
----- -------------
-
-
-
-
--
----- ------ - --- -------------------------------------
-----------------------------------------------------------上述代码创建了一个默认的层次结构模型编辑器，并将其挂载到 HTML 页面中的一个容器元素中。
在编辑器中，我们可以对层次结构模型进行展开和收缩，也可以添加、删除和修改节点。我们还可以通过 API 访问和修改编辑器中的数据。
API
HierarchicalModelEditor 工具提供了一系列 API，可以帮助开发者更好地访问和修改编辑器中的数据。下面是一些常用的 API 示例：
获取根节点
const rootNode = editor.getRootNode();
我们可以使用 getRootNode() 方法获取编辑器中的根节点。
获取节点
const node = editor.getNodeById(2);
我们可以使用 getNodeById(id) 方法获取指定 id 的节点。
添加节点
editor.addNode({
id: 5,
name: 'child3'
}, 1);我们可以使用 addNode(node, parentId) 方法添加一个节点，其中 parentId 是新节点的父节点的 id。
删除节点
editor.deleteNode(2);
我们可以使用 deleteNode(id) 方法删除一个节点，其中 id 是待删除节点的 id。
修改节点
editor.updateNode(3, {
name: 'newChild2'
});我们可以使用 updateNode(id, updates) 方法修改一个节点的数据，其中 updates 是待更新的数据对象。
示例代码
以下是一个完整的示例代码，可以直接在 HTML 页面中运行：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ------------
-------
----------------- -
------ -----
------- ------
-
--------
-------
------
---- ----------------------------
------- --------------
------ ----------------------- ---- ----------------------------------------------
----- ----------- - -
--- --
----- -------
--------- -
-
--- --
----- --------
--
-
--- --
----- ---------
--------- -
-
--- --
----- -------------
-
-
-
-
--
----- ------ - --- -------------------------------------
-----------------------------------------------------------
-------------- -- -
----- ------- - ----------------------------------------
------------------------ - ------------
------------------------
-- ------
---------
-------
-------在该示例中，我们创建了一个默认的层次结构模型编辑器，并将其挂载到 HTML 页面中的一个容器元素中。我们还设置了一个定时器来模拟实时更新数据的过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822dca