npm 包 @lndgalante/r-orgchart 使用教程

简介

@lndgalante/r-orgchart 是一个基于 React 的用于绘制组织树图的 npm 包。在前端开发中，我们通常需要绘制组织架构图以便更好的展示公司或者组织的结构、职位、人员等信息。@lndgalante/r-orgchart 不仅提供了简单易用的 API，同时还支持多种自定义配置以便更好的满足不同场景下的需求。

安装

使用 npm 进行安装：

npm install @lndgalante/r-orgchart

使用

在组件中引入 @lndgalante/r-orgchart, 然后在 render 函数内使用 OrgChart 组件进行渲染。

import React from 'react';
import OrgChart from '@lndgalante/r-orgchart';

const App = () => {
  const treeData = {
    name: 'CEO',
    children: [
      {
        name: 'CTO',
        children: [
          {
            name: 'Director A',
            children: [
              {
                name: 'Manager A',
                photo: 'https://picsum.photos/80?image=1027',
                email: 'manager.a@example.com',
              },
              {
                name: 'Manager B',
                photo: 'https://picsum.photos/80?image=1028',
                email: 'manager.b@example.com',
              },
            ],
          },
        ],
      },
    ],
  };

  return (
    <div className="App">
      <OrgChart tree={treeData} />
    </div>
  );
};

export default App;

以上代码将会生成如下的组织树图：

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}

示例：

import OrgChart from '@lndgalante/r-orgchart';

const Sample = () => {
  const [selectedNode, setSelectedNode] = useState(null);

  const handleSelectNode = (node) => {
    setSelectedNode(node);
  };

  return (
    <div>
      <OrgChart tree={tree} onSelectNode={handleSelectNode} />
      <p>Selected Node: {selectedNode && selectedNode.name}</p>
      <button onClick={() => OrgChart.exportChart()}>Export PDF</button>
    </div>
  );
};

定制化

@lndgalante/r-orgchart 提供了丰富的属性和方法，便于根据具体需求进行定制化。

节点属性

在 tree 对象中设置节点属性，支持以下属性：

属性名 类型 描述
name string 节点名称，必须提供
children array 子节点列表数组
photo string 节点头像 URL，可以使用 data URI
title string 节点职位（标题），位于节点下方
email string 节点邮件地址，点击节点可打开邮件客户端

示例：

const treeData = {
  name: 'CEO',
  photo: 'https://picsum.photos/80?image=1061',
  email: 'ceo@example.com',
  children: [
    {
      name: 'CTO',
      title: 'Chief Technology Officer',
      children: [
        {
          name: 'Director A',
          title: 'Director of Engineering',
          children: [
            {
              name: 'Manager A',
              photo: 'https://picsum.photos/80?image=1027',
              email: 'manager.a@example.com',
            },
            {
              name: 'Manager B',
              photo: 'https://picsum.photos/80?image=1028',
              email: 'manager.b@example.com',
            },
          ],
        },
        {
          name: 'Director B',
          title: 'Director of Operations',
          children: [
            {
              name: 'Manager C',
              photo: 'https://picsum.photos/80?image=1015',
              email: 'manager.c@example.com',
            },
            {
              name: 'Manager D',
              photo: 'https://picsum.photos/80?image=1020',
              email: 'manager.D@example.com',
            },
          ],
        },
      ],
    },
    {
      name: 'CFO',
      title: 'Chief Financial Officer',
      children: [
        {
          name: 'Manager E',
          photo: 'https://picsum.photos/80?image=1021',
          email: 'manager.e@example.com',
        },
        {
          name: 'Manager F',
          photo: 'https://picsum.photos/80?image=1097',
          email: 'manager.f@example.com',
        },
      ],
    },
  ],
};

节点样式

修改节点的样式有多种方法，可以通过 chartClass 属性定义 CSS 类名，也可以通过 CSS 属性直接修改节点样式。以下为一些常用的节点样式属性：

属性名 描述
.orgchart-node 所有节点的默认样式
.orgchart-level0 .active 一级节点的默认激活样式，可以在 chartClass 中定义样式 (e.g. .my-orgchart .orgchart-level0 .active)
.orgchart-level1 二级节点的默认样式
.orgchart-level2 三级节点的默认样式

示例：

.my-orgchart .orgchart-node {
  background-color: #eee;
}

.my-orgchart .orgchart-node .title,
.my-orgchart .orgchart-node .email {
  display: none;
}

.my-orgchart .orgchart-node:hover {
  background-color: #fc0;
}

.my-orgchart .orgchart-level0 .active {
  background-color: #f00;
}

以上 CSS 规则将会修改节点的样式，为节点添加灰色背景色、在默认情况下隐藏职位和邮件信息，当鼠标悬停在节点上时改变背景色为黄色，且激活的一级节点背景色变为红色。

总结

@lndgalante/r-orgchart 是一个非常实用的轻量级 React 组件库，它提供了许多有用的功能和 API，使得组织树图的绘制变得非常容易。希望本文能够对前端开发者们有所启发，让大家能够更加高效地使用 @lndgalante/r-orgchart 组件库。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53ba2

阅读全文

纠错反馈

精选内容

相关推荐

    暂无