如何在react中使用OrgChart？

最近在将OrgChart嵌入至React时，碰见了一些坑，希望能以此记录我是怎么爬出来的~

一、什么是OrgChart？

一款基于jquery来画组织架构图的插件。有以下特点：

• 支持本地数据和远程数据（JSON）
• 基于CSS3转换的平滑展开/折叠效果
• 将图表对齐为4个方向
• 允许用户通过拖放节点更改组织结构
• 允许用户动态编辑组织图并将最终层次结构保存为JSON对象
• 支持将图表导出为图片
• 支持平移和缩放
• 用户可采用多种解决方案来构建庞大的组织结构图（请参考多层或混合布局部分）
• 支持触摸的移动设备插件

二、使用方式

1、下载orgchart及jquery

$ npm install jquery 
$ npm install orgchart
复制代码

2、配置jquery

{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: 'jQuery'
    },{
      loader: 'expose-loader',
      options: '$'
    }]
 }
复制代码

此时jquery的配置是基于expose-loader的，所以这里也要下载expose-loader

$ npm install expose-loader
复制代码

如果是在ant-design中引入的（前提是引用了ant-design的脚手架），可在config-overrides.js中写入以下代码

module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: function(config, env) {
    config.module.rules = [
      ...config.module.rules,
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      },
    ]
    return config; 
  }
}
复制代码

3、引入orgChart

首先头部引入以下代码：

import $ from 'jquery';
import  'orgchart';
import 'orgchart/dist/css/jquery.orgchart.css';
复制代码

调用方式如下：

<div ref={ref => this.orgTree = ref} />
复制代码

const options = {
  'data' : datascource, // 数据源
  'depth': 20,
  'nodeContent': 'title',
  'createNode': this.addClick, // 当渲染节点时添加点击事件
  toggleSiblingsResp: true, // 允许用户收缩展开兄弟节点
  'visibleLevel': 2, // 默认展开两级
};
$(this.orgTree).orgchart(options);
复制代码

效果图如下：

datascource格式如下：

datascource = {
  name: '',
  title: '',
  id: '',
  children: [{
      name: '',
      title: '',
      id: '',
      children:[]
  }],
}
复制代码

关于配置，请参考以下API：

如果需要在渲染时添加点击事件可在options中添加:

'createNode': this.addClick
复制代码

根据API，createNode回调接收两个参数，$node, data

addClick = ($node, data) => {
    $($node).click(() => this.handleClick(data)); // click事件中可以添加相应操作，此时当你点击节点时，就会相应相应操作了
}
复制代码

如果需要收缩，展开节点，则需要做以下操作：

1）下载font-awesome

$npm install font-awesome
复制代码

2）在对应的js文件中引入font-awesome

import 'font-awesome/css/font-awesome.css';
复制代码

效果图如下:

三、补充

关于如何清空组织架构图，让其进行重新渲染，我采用了一个比较笨拙的方式：

1、将组织架构图封装成一个组件OrgTree

2、在需要的js引入这个组件，用state来控制组件的重新渲染

如：

{this.state.loading ? <Spin tip="正在加载" /> : <OrgTree id={id} fetchData={this.props.fetchData} />}
复制代码

当数据切换时，就将loading先置为true，等数据返回完全再讲loading置为false，然后在OrgTree的componentDidMount生命周期里调用生成组织架构图的函数即可重新渲染

最后附上插件地址附上插件地址https://github.com/dabeng/OrgChart