如何在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：

名称	类型	是否必须	默认值	描述
data	json or string	Y		数据源用于构建组织结构图的结构。它可以是JSON对象，也可以是包含发送Ajax请求的URL的字符串
pan	boolean	N	false	若启用此选项，则可以通过鼠标拖放来平移组织结构图
zoom	boolean	N	false	用户可以通过鼠标滚轮放大/缩小组织结构图
zoominLimit	number	N	7	允许用户设置放大限制
zoomoutLimit	number	N	0.5	允许用户设置缩小限制
direction	string	N	"t2b"	可用值为t2b（表示“从上到下”，默认值）、b2t（表示“从下到上”）、l2r（表示“从左到右”）、r2l（表示“从右到左”）
verticalLevel	integer(>=2)	N		用户可以使用此选项从指定级别垂直对齐节点
toggleSiblingsResp	boolean	N	false	用户可通过单击左/右箭头分别显示/隐藏左/右兄弟节点
ajaxURL	json	N		它包括四个属性——父、子、兄弟、族（请求父节点和兄弟节点）。不同的属性提供了不同节点的Ajax请求发送到的URL。
visibleLevel	positive integer	N	999	它表示在最开始的组织结构图扩展到的级别
nodeTitle	string	N	"name"	它将数据源的一个属性设置为组织结构图节点标题部分的文本内容。实际上，用户只需使用nodetile选项就可以创建一个简单的orghcart
parentNodeSymbol	string	N	"fa-users"	使用字体Awesome图标表示节点具有子节点
nodeContent	string	N		它将数据源的一个属性设置为组织结构图节点的内容部分的文本内容
nodeId	string	N	"id"	它将数据源的一个属性设置为每个组织结构图节点的唯一标识符
nodeTemplate	function	N		它是一个模板生成函数，用于定制任何复杂的节点内部结构。它只接收一个参数：“data”代表将用于呈现一个节点的json datasoure
createNode	function	N		它是一个回调函数，用于自定义每个组织结构图节点。接收两个参数：“$node”代表单节点DIV的jquery对象；“data”代表单节点的datasource
exportButton	boolean	N	false	它为组织结构图启用导出按钮
exportFilename	string	N	"Orgchart"	它是将当前组织结构图导出为图片时的文件名
exportFileextension	string	N	"png"	可用值为png和pdf
chartClass	string	N	""	当你想在一个页面上实例化多个组织结构图时，你应该添加不同的类名来区分它们
draggable	boolean	N	false	如果用户启用此选项，则可以拖放组织结构图的节点。注意：此功能在IE上不起作用，因为它不支持HTML5拖放API
dropCriteria	function	N		用户可以构造自己的条件来限制拖动节点和放置区域之间的关系。此外，此函数接受三个参数（draggednode、dragzone、dropzone），只返回boolen值
initCompleted	function	N		了解表何时完全初始化、数据加载和呈现，尤其是在使用Ajax数据源时，通常很有用。它接收一个参数：“$chart”代表初始化图表的jquery对象

如果需要在渲染时添加点击事件可在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