どのようにreactでOrgChartを使用しますか?

7819 ワード

最近OrgChartをReactに埋め込んだ時、いくつかの穴にぶつかって、私がどのように這い出したのかを記録してほしいです.
一、OrgChartとは何ですか.
jqueryに基づいて組織アーキテクチャ図を描くプラグインです.以下の特徴があります.
  • ローカルデータとリモートデータ(JSON)
  • をサポート
  • CSS 3変換によるスムーズ展開/折りたたみ効果
  • グラフを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';
    

    呼び出し方法は次のとおりです.
    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