简介
@lndgalante/r-orgchart 是一个基于 React 的用于绘制组织树图的 npm 包。在前端开发中，我们通常需要绘制组织架构图以便更好的展示公司或者组织的结构、职位、人员等信息。@lndgalante/r-orgchart 不仅提供了简单易用的 API，同时还支持多种自定义配置以便更好的满足不同场景下的需求。
安装
使用 npm 进行安装：
--- ------- ----------------------
使用
在组件中引入 @lndgalante/r-orgchart, 然后在 render 函数内使用 OrgChart 组件进行渲染。
------ ----- ---- --------
------ -------- ---- -------------------------
----- --- - -- -- -
----- -------- - -
----- ------
--------- -
-
----- ------
--------- -
-
----- --------- ---
--------- -
-
----- -------- ---
------ --------------------------------------
------ ------------------------
--
-
----- -------- ---
------ --------------------------------------
------ ------------------------
--
--
--
--
--
--
--
------ -
---- ----------------
--------- --------------- --
------
--
--
------ ------- ----以上代码将会生成如下的组织树图：
API
属性
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| tree | object | 组织树的数据对象，必须包含 name 属性。 |
|
| chartClass | string | 组织树图的 CSS 类名 | |
| chartId | string | 组织树图元素的 id | |
| exportBtn | boolean | false | 是否显示导出按钮 |
| exportFileName | string | orgchart.pdf | 导出文件名 |
| direction | string | l2r | 组织树图的方向。可选值为 'l2r', 'r2l', 't2b', 'b2t'。 |
| pan | boolean | true | 是否启用组织树图的平移功能 |
| zoom | boolean | true | 是否启用组织树图的缩放功能 |
方法
| 名称 | 描述 |
|---|---|
| exportChart | 导出组织树图为 PDF 文件，文件名由 exportFileName 定义。 |
| getSelectedNode | 获取当前选中的节点，返回一个包含节点信息的对象。{id, name} |
示例：
------ -------- ---- -------------------------
----- ------ - -- -- -
----- -------------- ---------------- - ---------------
----- ---------------- - ------ -- -
----------------------
--
------ -
-----
--------- ----------- ------------------------------- --
----------- ----- ------------- -- ----------------------
------- ----------- -- ------------------------------ ------------
------
--
--定制化
@lndgalante/r-orgchart 提供了丰富的属性和方法，便于根据具体需求进行定制化。
节点属性
在 tree 对象中设置节点属性，支持以下属性：
| 属性名 | 类型 | 描述 |
|---|---|---|
| name | string | 节点名称，必须提供 |
| children | array | 子节点列表数组 |
| photo | string | 节点头像 URL，可以使用 data URI |
| title | string | 节点职位（标题），位于节点下方 |
| string | 节点邮件地址，点击节点可打开邮件客户端 |
示例：
----- -------- - -
----- ------
------ --------------------------------------
------ ------------------
--------- -
-
----- ------
------ ------ ---------- ---------
--------- -
-
----- --------- ---
------ --------- -- -------------
--------- -
-
----- -------- ---
------ --------------------------------------
------ ------------------------
--
-
----- -------- ---
------ --------------------------------------
------ ------------------------
--
--
--
-
----- --------- ---
------ --------- -- ------------
--------- -
-
----- -------- ---
------ --------------------------------------
------ ------------------------
--
-
----- -------- ---
------ --------------------------------------
------ ------------------------
--
--
--
--
--
-
----- ------
------ ------ --------- ---------
--------- -
-
----- -------- ---
------ --------------------------------------
------ ------------------------
--
-
----- -------- ---
------ --------------------------------------
------ ------------------------
--
--
--
--
--节点样式
修改节点的样式有多种方法，可以通过 chartClass 属性定义 CSS 类名，也可以通过 CSS 属性直接修改节点样式。以下为一些常用的节点样式属性：
| 属性名 | 描述 |
|---|---|
| .orgchart-node | 所有节点的默认样式 |
| .orgchart-level0 .active | 一级节点的默认激活样式，可以在 chartClass 中定义样式 (e.g. .my-orgchart .orgchart-level0 .active) |
| .orgchart-level1 | 二级节点的默认样式 |
| .orgchart-level2 | 三级节点的默认样式 |
示例：
------------ -------------- - ----------------- ----- - ------------ -------------- ------- ------------ -------------- ------ - -------- ----- - ------------ -------------------- - ----------------- ----- - ------------ ---------------- ------- - ----------------- ----- -
以上 CSS 规则将会修改节点的样式，为节点添加灰色背景色、在默认情况下隐藏职位和邮件信息，当鼠标悬停在节点上时改变背景色为黄色，且激活的一级节点背景色变为红色。
总结
@lndgalante/r-orgchart 是一个非常实用的轻量级 React 组件库，它提供了许多有用的功能和 API，使得组织树图的绘制变得非常容易。希望本文能够对前端开发者们有所启发，让大家能够更加高效地使用 @lndgalante/r-orgchart 组件库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53ba2