react中使用orgchart组织结构插件

独孤天下 發表於 2019-5-27 14:16:00

一、使用前的准备
$ npm install jquery
$ npm install expose-loader
 
$ npm install orgchart
$ npm install font-awesome
 
二、对应js页面demo
<div class="cnblogs_code">
<pre>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;</pre>
</div>
三、补充
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】 
来源：https://www.cnblogs.com/nangras/p/10930479.html

頁: [1]

琼殿技术论坛's Archiver

react中使用orgchart组织结构插件