如何在react中使⽤OrgChart？
最近在将OrgChart嵌⼊⾄React时，碰见了⼀些坑，希望能以此记录我是怎么爬出来的~
⼀、什么是OrgChart？
⼀款基于jquery来画组织架构图的插件。有以下特点：
⽀持本地数据和远程数据（JSON）
基于CSS3转换的平滑展开/折叠效果
将图表对齐为4个⽅向
允许⽤户通过拖放节点更改组织结构
允许⽤户动态编辑组织图并将最终层次结构保存为JSON对象
⽀持将图表导出为图⽚
⽀持平移和缩放
⽤户可采⽤多种解决⽅案来构建庞⼤的组织结构图（请参考多层或混合布局部分）
⽀持触摸的移动设备插件
⼆、使⽤⽅式
1、下载orgchart及jquery
$ npm install jquery
$ npm install orgchart
2、配置jquery
{
test: solve('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中写⼊以下代码
/
/ The Webpack config to use when compiling your react app for development or production.  webpack: function(config, env) {
...dule.rules,
{
test: solve('jquery'),
use: [{
loader: 'expose-loader',
落幕之舞options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'雨泪
}]
},
一生何求 苏妙玲
]
return config;
}
}
3、引⼊orgChart
⾸先头部引⼊以下代码：
import $ from 'jquery';
import  'orgchart';
import 'orgchart/dist/hart.css';
调⽤⽅式如下：
<div ref={ref => Tree = ref} />
const options = {
'data' : datascource, // 数据源
'depth': 20,
'nodeContent': 'title',
'createNode': this.addClick, // 当渲染节点时添加点击事件
toggleSiblingsResp: true, // 允许⽤户收缩展开兄弟节点
'visibleLevel': 2, // 默认展开两级
};
$(Tree).orgchart(options);
billiejean
效果图如下：
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 N7允许⽤户设置放⼤限制
zoomoutLimit number N0.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
N999它表⽰在最开始的组织结构图扩展到的级别
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⽣命周期⾥调⽤⽣成组织架构图的函数即可重新渲染