如何在react中使用OrgChart？

圓滾滾的程式猿發表於1970-01-01
ReactGC

最近在將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);
複製程式碼

效果圖如下：

如何在react中使用OrgChart？

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';
複製程式碼

效果圖如下:

如何在react中使用OrgChart？

三、補充

關於如何清空組織架構圖，讓其進行重新渲染，我採用了一個比較笨拙的方式：

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

相關文章