最近在將OrgChart嵌入至React時,遇見了一些坑,但願能以此記錄我是怎麼爬出來的~css
一款基於jquery來畫組織架構圖的插件。有如下特色:node
$ npm install jquery
$ npm install orgchart
複製代碼
{
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;
}
}
複製代碼
首先頭部引入如下代碼: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';
複製代碼
效果圖以下:
關於如何清空組織架構圖,讓其進行從新渲染,我採用了一個比較笨拙的方式:
如:
{this.state.loading ? <Spin tip="正在加載" /> : <OrgTree id={id} fetchData={this.props.fetchData} />}
複製代碼
當數據切換時,就將loading先置爲true,等數據返回徹底再講loading置爲false,而後在OrgTree的componentDidMount生命週期裏調用生成組織架構圖的函數便可從新渲染
最後附上插件地址附上插件地址https://github.com/dabeng/OrgChart