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】

查看更多关于react中使用orgchart组织结构插件的详细内容...