tree-list 是一个实用的 npm 包，可以展示树形结构的数据列表，方便用户查看和操作。本文将介绍 tree-list 的使用方法，包括安装、调用和 API 等重要内容。
安装
使用 tree-list 前需要在你的项目中安装它，可以使用 npm 命令进行安装：
--- - ---------
该命令将自动安装 tree-list 和它的所有依赖包。
调用
在安装完成后，你需要在你的项目中导入并使用 tree-list。
ES6 环境
如果你使用的是 ES6 环境，则需要导入以下模块：
------ - -------- - ---- ------------
CommonJS 环境
如果你使用的是 CommonJS 环境，则需要导入以下模块：
----- -------- - ------------------------------
AMD 环境
如果你使用的是 AMD 环境，则需要导入以下模块：
---------------------- ------------------ - -- ---- ---- ---- ---
注：你需要在 webpack、Browserify 或 RequireJS 等工具中配置相应的模块导入方式。
API
现在我们已经成功导入了 tree-list，下面是一些常用的 API 方法：
1. TreeList(config)
TreeList 构造函数需要传入下面的 config 参数：
----- ------ - - ------- ------ -- --- -- ------ --- -- ---- ----- ------- -- --------- - ---- --------- -- -- --------- -- ----- ---- - --- -----------------
rootId：指定根节点的 ID，必选参数；
nodes：指定节点列表，节点列表应为一个对象，必选参数；
mode：操作模式有两种，分别为 read （只读）和 edit （编辑），默认为 read；
onChange：监听值变化事件，回调函数接收一个参数：当前节点的 ID。
2. tree.render()
生成并返回树形列表的 HTML代码，并挂载到 DOM 节点中，可以参考下面的示例代码：
------
---- --------------------------
------- --------------
------ - -------- - ---- ------------
----- ------ - -
------- ------
------ -
------ - --- ------ ----- ------ --------- ------- ------ ------ --
------ - --- ------ ----- ------- --------- -- --
------ - --- ------ ----- ------- --------- -- --
------ - --- ------ ----- ------- --------- ------- --
------ - --- ------ ----- -------- --------- -- -
--
----- -------
--------- -------- -- -------------------- -- -------------
--
----- ---- - --- -----------------
----- --------- - ------------------------------------------
------------------- - --------------
---------
-------3. tree.select(nodeId)
选择（或取消选择）某个节点，需要传入该节点的 ID。
----- ---- - --- ----------------- ------------------- -- -- -- - ----- ---
4. tree.addSibling(nodeId)
添加兄弟节点，需要传入该节点的 ID。
----- ---- - --- ----------------- ----------------------- -- - -- - ----- ----------
5. tree.addChild(nodeId)
添加子节点，需要传入该节点的 ID。
----- ---- - --- ----------------- --------------------- -- - -- - ----- ---------
6. tree.edit(nodeId)
进入编辑模式，需要传入该节点的 ID。
----- ---- - --- ----------------- ----------------- -- - -- - ----- ----------
7. tree.delete(nodeId)
删除某个节点，需要传入该节点的 ID。
----- ---- - --- ----------------- ------------------- -- -- -- - ----- ---
示例
下面是一个简单的示例代码，可以对 tree-list 进行增删改查等操作：
------
---- --------------------------
------- --------------
------ - -------- - ---- ------------
----- ------ - -
------- ------
------ -
------ - --- ------ ----- ------ --------- ------- ------ ------ --
------ - --- ------ ----- ------- --------- -- --
------ - --- ------ ----- ------- --------- -- --
------ - --- ------ ----- ------- --------- ------- --
------ - --- ------ ----- -------- --------- -- -
--
----- -------
--------- -------- -- -------------------- -- -------------
--
----- ---- - --- -----------------
----- --------- - ------------------------------------------
------------------- - --------------
-------------------------------------------------------------------- -- -- -
----- ----- - ---------------------------------------------
-----------------------------
------------------- - --------------
---
------------------------------------------------------------------ -- -- -
----- ----- - -------------------------------------------
---------------------------
------------------- - --------------
---
------------------------------------------------------------- -- -- -
----- ----- - --------------------------------------
-----------------------
---
--------------------------------------------------------------- -- -- -
----- ----- - ----------------------------------------
-------------------------
------------------- - --------------
---
---------
-----
------ ---------------------- --------------- --- --
------- ------------------------------------
------
-----
------ -------------------- --------------- --- --
------- ---------------------------------
------
-----
------ ----------------- --------------- --- --
------- -----------------------------
------
-----
------ --------------- --------------- --- --
------- -----------------------------
------
-------通过运行这个示例，你可以更好地理解 tree-list 的使用方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055a3781e8991b448d7d9f