npm 包 nn-angular-tree 使用教程

阅读时长 7 分钟读完

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

纠错
反馈

纠错反馈