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