react-orgchart 制作組織架構圖

一、使用前的准備

$ npm install jquery

$ npm install expose-loader

 

$ npm install orgchart

$ npm install font-awesome

 

二、對應js頁面demo

import React, { Component } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import $ from 'jquery';
import 'orgchart';
import 'orgchart/dist/css/jquery.orgchart.css';
import 'font-awesome/css/font-awesome.css';

const datascource = {
  name: '老板',
  title: '老板',
  id: '1',
  key: '1',
  children: [
    {
      name: '員工',
      title: '員工',
      id: '2',
      key: '2',
      children: [],
    },
    {
      name: '員工',
      title: '員工',
      id: '3',
      key: '3',
      children: [
        {
          name: '員工',
          title: '員工',
          id: '5',
          key: '5',
          children: [],
        },
        {
          name: '員工',
          title: '員工',
          id: '6',
          key: '6',
          children: [],
        },
        {
          name: '員工',
          title: '員工',
          id: '7',
          key: '7',
          children: [],
        },
      ],
    },
    {
      name: '員工',
      title: '員工',
      id: '4',
      key: '4',
      children: [],
    },
  ],
};

class wnChart extends Component {
  componentDidMount() {
    const options = {
      data: datascource, // 數據源
      depth: 20,
      nodeContent: 'title',
      createNode: this.addClick, // 當渲染節點時添加點擊事件
      toggleSiblingsResp: true, // 允許用戶收縮展開兄弟節點
      visibleLevel: 3, // 默認展開兩級
    };
    $(this.orgTree).orgchart(options);
  }
  addClick = ($node, data) => {
    $($node).click(() => this.handleClick(data));
  };
  handleClick = data => {
    console.log(data);
  };
  render() {
    return (
      <PageHeaderWrapper title="組織架構">
        <div ref={ref => (this.orgTree = ref)} />
      </PageHeaderWrapper>
    );
  }
}

export default wnChart;

三、補充

data【json or String】：數據

pan 【boolean 默:flase】：通過鼠標拖放來控制OrgChart

zoom【boolean 默:false】：通過鼠標滾輪放大或縮放OrgChart

zoominLimit【number 默:7】：設置放大限制

zoomoutLimit【number 默:0.5】：設置縮放限制

direction【String 默:t2b】：T2B："從上到下"，B2T："從底到上"，L2R："左到右"，R2L："向左到右"

verticalLevel【integer(>=2)】：

toggleSiblingsResp【boolean 默:false】：通過單擊左/右箭頭分別顯示/隱藏左/右兄弟節點

ajaxURL【json】：不同的優先級提供了發送不同節點的Ajax請求的URL

visibleLevel【number】：默認展開幾級

nodeId【String 默:id】：將數據源的一個屬性設置為每個OrgChart節點的唯一標識符。

nodeTitle【String 默:name】：將數據源的一個屬性設置為OrgChart節點標題段的文本內容

nodeContent【String】：將數據源的一個屬性設置為OrgChart節點的內容部分的文本內容。

nodeTemplate【function】：它是一個模板生成函數，用於定制任何復雜的節點內部結構

createNode【function】：它是用於自定義每個OrgCad節點的回調函數

parentNodeSymbol【String 默:fa-users】：使用圖標暗示該節點有子節點

exportButton【boolean 默:false】：是否啟用OrgChar的導出按鈕

exportFilename【String 默:OrgChart】：當輸出當前的OrgChart作為圖片時，它是文件名。

exportFileextension【String 默:png】：可用的值是PNG和PDF。

chartClass【String】：當你想在一個頁面上實例化多個orgcharts 時，你應該添加不同的類名來區分它們。

draggable【boolean 默:false】：用戶可以拖動和刪除OrgChart節點

dropCriteria【function】：用戶可以構造自己的標准來限制拖動節點和刪除區域之間的關系

initCompleted【function】：經常知道您的表何時已經完全初始化、數據加載和呈現，尤其是當使用Ajax數據源時
---------------------
參數來自：van久 【https://blog.csdn.net/qq_40594137/article/details/80910040】