如何在react中使用OrgChart?

最近在將OrgChart嵌入至React時,遇見了一些坑,但願能以此記錄我是怎麼爬出來的~css

1、什麼是OrgChart?

一款基於jquery來畫組織架構圖的插件。有如下特色:node

  • 支持本地數據和遠程數據(JSON)
  • 基於CSS3轉換的平滑展開/摺疊效果
  • 將圖表對齊爲4個方向
  • 容許用戶經過拖放節點更改組織結構
  • 容許用戶動態編輯組織圖並將最終層次結構保存爲JSON對象
  • 支持將圖表導出爲圖片
  • 支持平移和縮放
  • 用戶可採用多種解決方案來構建龐大的組織結構圖(請參考多層或混合佈局部分)
  • 支持觸摸的移動設備插件

2、使用方式

一、下載orgchart及jquery

$ npm install jquery 
$ npm install orgchart
複製代碼

二、配置jquery

{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: 'jQuery'
    },{
      loader: 'expose-loader',
      options: '$'
    }]
 }
複製代碼

此時jquery的配置是基於expose-loader的,因此這裏也要下載expose-loaderreact

$ npm install expose-loader
複製代碼

若是是在ant-design中引入的(前提是引用了ant-design的腳手架),可在config-overrides.js中寫入如下代碼jquery

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; 
  }
}
複製代碼

三、引入orgChart

首先頭部引入如下代碼:webpack

import $ from 'jquery';
import  'orgchart';
import 'orgchart/dist/css/jquery.orgchart.css';
複製代碼

調用方式以下:git

<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);
複製代碼

效果圖以下: github

datascource格式以下:web

datascource = {
  name: '',
  title: '',
  id: '',
  children: [{
      name: '',
      title: '',
      id: '',
      children:[]
  }],
}
複製代碼

關於配置,請參考如下API:ajax

名稱 類型 是否必須 默認值 描述
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中添加:npm

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

效果圖以下:

3、補充

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

一、將組織架構圖封裝成一個組件OrgTree

二、在須要的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

相關文章
相關標籤/搜索