lxz-blogs

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】

分类:

技术点:

相关文章:

猜你喜欢