nn-angular-tree 是一个基于 Angular2+ 的树形结构组件库，可以方便地构建一个简单或复杂的树形结构展示界面。
安装
使用 npm 进行安装：
--- ------- ---------------
之后引入树形结构组件：
------ - ---------- - ---- ------------------
使用
使用 nn-angular-tree 可以快速构建一个树形结构，示例如下：
-------- --------------- ------------------- ---------------------------------------- ----------
nodes
nodes 属性用于存储树形结构的节点。节点的类型如下：
--------- -------- - --- ------- ----- ------- ---------- ----------- ---------- -------- -
- id：节点的唯一标识符，用于标识节点。
- name：节点的显示名称。
- children：节点的子节点数组，可以包含多个节点。
- expanded：是否展开节点，默认为 false。
示例节点数据如下：
----- - -
-
--- ----
----- ----- ---
--------- -
- --- ---- ----- ----- ---- --
-
--- ----
----- ----- -----
--------- -
- --- ---- ----- ----- ------ --
- --- ---- ----- ----- ------ -
-
-
-
--
- --- ---- ----- ----- --- --------- ---- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- -
--options
options 属性用于控制树形结构的显示效果。选项类型如下：
--------- ----------- - ----------- -------- ----------- -------- ------------ --------------- ------------ ----------- -
- draggable：是否允许节点拖动，默认为 false。
- droppable：是否允许拖动节点到其他节点上，默认为 false。
- dropAction：在拖动节点时执行的操作类型，默认为 DropActionType.Move，可选值为 Move 或 Copy。
- cssClasses：控制树形结构样式的 CSS 类名，可选值如下：
--------- ---------- - ------ ------- -------------- ------- -------------- ------- --------------- ------- ---------------- ------- -
示例 options 值如下：
------- - -
---------- -----
---------- -----
----------- --------------------
----------- -
----- ------------
------------- ---------------------
------------- ---------------------
-------------- ----------------------
--------------- -----------------------
-
--nodeSelected 事件
当节点被选中时，会触发 nodeSelected 事件。事件的参数为选中节点的实例。
-------------------- ---------- ---- - --------------------- ------- ------ -
示例
完整的树形结构组件代码如下：
-------- --------------- ------------------- ---------------------------------------- ----------
------ - --------- - ---- ----------------
------ - ----------- --------- ------------ -------------- - ---- ------------------
------------
--------- -----------
--------- -
--------
---------------
-------------------
----------------------------------------
----------
-
--
------ ----- ------------ -
------ ---------- - -
-
--- ----
----- ----- ---
--------- -
- --- ---- ----- ----- ---- --
-
--- ----
----- ----- -----
--------- -
- --- ---- ----- ----- ------ --
- --- ---- ----- ----- ------ -
-
-
-
--
- --- ---- ----- ----- --- --------- ---- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- -
--
-------- ----------- - -
---------- -----
---------- -----
----------- --------------------
----------- -
----- ------------
------------- ---------------------
------------- ---------------------
-------------- ----------------------
--------------- -----------------------
-
--
-------------------- ---------- ---- -
--------------------- ------- ------
-
-通过 nn-angular-tree 组件，我们可以轻松构建一个树形结构的展示界面。同时，通过 options 属性和 nodeSelected 事件，我们可以自定义树形结构的显示效果并处理用户行为。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005584d81e8991b448d5839