どのようにreactでOrgChartを使用しますか?
7819 ワード
最近OrgChartをReactに埋め込んだ時、いくつかの穴にぶつかって、私がどのように這い出したのかを記録してほしいです.
一、OrgChartとは何ですか.
jqueryに基づいて組織アーキテクチャ図を描くプラグインです.以下の特徴があります.ローカルデータとリモートデータ(JSON) をサポート CSS 3変換によるスムーズ展開/折りたたみ効果 グラフを4方向に整列 は、ユーザがドラッグアンドドロップノードを介して組織構造 を変更することを可能にする.は、ユーザが組織図を動的に編集し、最終階層をJSONオブジェクト として保存することを可能にする.は、グラフをピクチャ にエクスポートすることをサポートする.は、パンおよびズーム をサポートするユーザーは、複数のソリューションを使用して膨大な組織図を構築することができます(多層またはハイブリッドレイアウト部分を参照してください) .タッチ対応モバイル機器プラグイン 二、使用方法
1、orgchartとjqueryをダウンロードする
2、jqueryの構成
このときjqueryの構成はexpose-loaderに基づいているので、ここでもexpose-loaderをダウンロードします
ant-designに導入する場合(ant-designの足場を参照することを前提とする)、config-overrides.jsに次のコードを書き込む
3、orgChart導入
まず、ヘッダには次のコードが導入されます.
呼び出し方法は次のとおりです.
一、OrgChartとは何ですか.
jqueryに基づいて組織アーキテクチャ図を描くプラグインです.以下の特徴があります.
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';
呼び出し方法は次のとおりです.
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"
な は、t 2 b(「 から へ」、デフォルト )、b 2 t(「 から へ」)、l 2 r(「 から へ」)、r 2 l(「 から へ」を す)、
verticalLevel
integer(>=2)
N
このオプションを して、 したレベルのノードを に わせできます.
toggleSiblingsResp
boolean
N
false
/ をクリックすると、 / ノードを / にできます.
ajaxURL
json
N
これには、 、 、 、ファミリー( ノードと ノードを )の4つのプロパティが まれます. なる は、 なるノードのAjax が したURLを する.
visibleLevel
positive integer
N
999
の で されたレベルを します.
nodeTitle
string
N
"name"
データ・ソースのプロパティの1つを、 ノードのヘッダー のテキスト に します. 、ユーザーはnodetileオプションを するだけで なorghcartを できます.
parentNodeSymbol
string
N
"fa-users"
フォントAwesomeアイコンを して、ノードにサブノードがあることを します.
nodeContent
string
N
データ・ソースのプロパティを、 ノードのコンテンツ・セクションのテキスト・コンテンツに します.
nodeId
string
N
"id"
データ・ソースのプロパティを、 ノードの の に します.
nodeTemplate
function
N
なノードの をカスタマイズするテンプレート です.パラメータは1つのみ されます.「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
""
の を1つのページでインスタンス したい は、 なるクラス を して する があります.
draggable
boolean
N
false
このオプションを にすると、 のノードをドラッグ&ドロップできます. :この はIEでは しません.HTML 5ドラッグ&ドロップAPIがサポートされていないためです.
dropCriteria
function
N
ユーザは、ドラッグノードと の を するために の を できます.さらに、この は3つのパラメータ(draggednode、dragzone、dropzone)を け れ、boolen のみを します.
initCompleted
function
N
テーブルが に され、データがロードされ、 されるタイミングを します. に、Ajaxデータ・ソースを する に です.「$chart」は、 グラフのjqueryオブジェクトを すパラメータを します.
レンダリング にクリックイベントを する がある は、optionsに します.'createNode': this.addClick
APIによると、createNodeコールバックは2つのパラメータ、$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 ? " " /> : }
データが り わると、loadingをtrueに し、データが に ってからloadingをfalseに し、OrgTreeのcomponentDidMountライフサイクルで を する を び すと レンダリングされます.
にプラグインアドレスを プラグインアドレスを https://github.com/dabeng/OrgChart
:https://juejin.im/post/5c4bb74c51882525dc62f969