它'；这是一个简单直接的组织结构图插件。任何时候你想要一个树状图表，你都可以转到组织结构图。
Posted
tags:
中文标题：它'；这是一个简单直接的组织结构图插件。任何时候你想要一个树状图表，你都可以转到组织结构图。 原文标题：It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart. 项目评级：Star:2700 Fork:756 下载地址：https://github.com/dabeng/OrgChart 详情介绍用其他语言阅读：简体中文, 繁體中文
ES6版本
Web组件版本
Vue.js版本
Angular版本——最节省空间的解决方案
React版本
前言
首先，非常感谢wesnolte的伟大工作——jOrgChart。使用嵌套表构建树状组织结构图的想法令人惊叹。这个想法比基于svg的同类想法更简单、更直接
不幸的是，很长一段时间没有看到jOrgChart的更新。另一方面，我有一些有趣的想法要添加，所以我选择创建一个新的回购。从3.0版本开始，我们使用嵌套ul来构建树状图表，而不是嵌套表。
特征
CDN公司
用户可以找到对OrgChart的CSS和JavaScript的相关CDN支持。
https://cdnjs.com/libraries/orgchart
安装
当然，您可以通过在Web应用程序中包含dist/js/jquery.orgchart.js和dist/css/jquery.ogchart.css来直接使用独立构建。
使用Bower安装
# From version 1.0.2 on, users can install orgchart and add it to bower.json dependencies
$ bower install orgchart
使用npm安装
# From version 1.0.4 on, users can install orgchart with npm
$ npm install orgchart
require（'orgchart'）将把orgchart插件加载到jQuery对象上。组织结构图模块本身不导出任何内容。
github页面上的演示
基于嵌套表的演示
基于嵌套ul的演示
在线演示
注意：当用户使用ajaxURL选项构建orghchart时，必须使用json数据源（本地和远程都可以），并自行设置数据源的关系属性。所有这些人员都用于为节点生成正确的展开/折叠箭头。
在这里，我们需要来自html2canvas的帮助。
注：
（1） 如果你想在IE或Edge中导出一些东西，请先介绍es6-promise.auto.js。
（2） 如果您的操作系统是windows，请检查您的显示器缩放设置。对于perfact导出的图片，您最好将“更改文本、应用程序和其他项目的大小”调整为100%。（感谢sayamkrai的探索）
（3） 此外，如果你想导出pdf格式或你的组织结构图包含图片，你必须引入jspdf并将“exportFileextension”选项设置为“pdf”。
您需要将img标记的交叉原点设置为匿名。
在这里，我们回到OpenLayers。它是Web GIS中最令人惊叹的开源js库，你一定不会错过。
借助于orgchart插件公开的核心方法（addParent（）、addSiblings（）、addChildren（）、removeNodes（）），我们可以轻松完成这项任务。
允许用户拖动&；当选项“draggable”被赋值为true时，删除组织结构图的节点（注意：此功能在IE上不起作用，因为它对HTML5拖放API的支持较差）。
此外，用户可以使用选项dropCriteria来注入他们对拖拽的自定义限制；滴如下所示，我们不希望经理员工在任何情况下都处于工程师之下。
这就是getHierarchy（）的作用所在。
这是一项非常简单的任务，我们只需要将id或className属性附加到节点数据中。
事实上，这是一个很好的解决方案，可以显示包含大量节点数据的组织图。
此功能的灵感来源于以下问题（垂直对齐儿童、混合（水平+垂直）组织结构图）。感谢mfahadi和Destructrix的建设性建议，特别感谢tedliang出色的混合模式解决方案。
从现在起，用户再也不用担心如何在浏览器的一个屏幕上对齐大量节点了。“verticalLevel”选项允许用户从给定级别垂直对齐子节点。
注意：目前，该选项与许多其他选项或方法不兼容，如direction、drag-amp；drop、addChildren（）、removeNodes（）、getHierarchy（）等。这些冲突将在后续版本中逐一解决。
没问题。您只需要借助选项“collapse”和className“slide up”来调整数据源的一些细节。
这没什么大不了的。您只需转到方法init（）。
没问题。在ES6-Template文本的帮助下，我们可以自定义任何复杂的节点结构，而不是常见的标题和内容部分。
您需要基于新数据源结构的解决方案，该结构具有levelOffset数据道具+回调createNode（）+CSS自定义属性（变量）
isVertical数据属性是为您的用例设计的。一旦一个节点有一个值为true的“isVertical”道具，其子节点将垂直排列。
如何在本地启动演示
用法
实例化语句
数据源结构
选项
<表格>
名称 类型 必需 默认 描述
发送ajax请求
pt三个参数（draggedNode、dragZone、dropZone），并且只返回boolen值
方法
我相信，在您尝试了demo-edit组织结构图之后，您可以掌握以下方法的要点。
var oc=$container.orgchart（选项）
在指定的容器中嵌入组织结构图。接受一个选项对象，您可以通过“选项”部分找到需要的选项。变量oc是类OrgChart的实例。
初始化（newOptions）
当用户想要根据新选项重新初始化或刷新组织结构图或重新加载新数据时，这是一种有用的方法。
addParent（数据）
为当前组织结构图添加父节点（实际上它总是根节点）。
<表格>
名称 类型 必需 默认 描述
addSiblings（$node，数据）
为指定节点添加同级节点。
<表格>
名称 类型 必需 默认 描述
addChildren（$node，数据）
为设计的节点添加子节点。
<表格>
名称 类型 必需 默认 描述
removeNodes（$node）
删除指定的节点及其降级节点。
<表格>
名称 类型 必需 默认 描述
获取层次结构（）
该方法旨在获取组织结构图的层次关系，以便进一步处理。例如，在编辑orgchart之后，您可以将此方法的返回值发送到服务器端，并保存orghcart的新状态。
<表格>
名称 类型 必需 默认 描述
hidePrent（$node）
此方法允许您以程序方式隐藏任何特定节点（.node元素）的父节点（如果有的话）。
<表格>
名称 类型 必需 默认 描述
showParent（$node）
此方法允许您以程序方式显示任何特定节点（.node元素）的父节点（如果有的话）。
<表格>
名称 类型 必需 默认 描述
hideChildren（$node）
此方法允许您以程序方式隐藏任何特定节点（.node元素）的子节点（如果有的话）。
<表格>
名称 类型 必需 默认 描述
showChildren（$node）
此方法允许您sh
用程序显示任何特定节点（.node元素）的子节点（如果有的话）。
<表格>
名称 类型 必需 默认 描述
hideSiblings（$node，方向）
此方法允许您以程序方式隐藏任何特定节点（.node元素）的同级节点（如果有的话）。
<表格>
名称 类型 必需 默认 描述
showSiblings（$node，方向）
此方法允许您以程序方式显示任何特定节点（.node元素）的同级节点（如果有的话）。
<表格>
名称 类型 必需 默认 描述
getNodeState（$node，关系）
此方法返回指定节点的相关节点的显示状态。
<表格>
名称 类型 必需 默认 描述
返回的对象将具有以下结构：
getRelatedNodes（$node，关系）
此方法返回与指定节点相关的节点。
<表格>
名称 类型 必需 默认 描述
getParent（$node）
此方法返回指定节点的父节点。
<表格>
名称 类型 必需 默认 描述
getSiblings（$node）
此方法返回指定节点的同级节点。
<表格>
名称 类型 必需 默认 描述
getChildren（$node）
此方法返回指定节点的子节点。
<表格>
名称 类型 必需 默认 描述
setChartScale（$chart，newScale）
此方法可帮助您设置具有新比例的指定图表。
<表格>
名称 类型 必需 默认 描述
导出（exportFilename，exportFileextension）
此方法允许您将当前组织结构图导出为png或pdf文件。
<表格>
名称 类型 必需 默认 描述
事件
<表格>
事件类型 其他参数 描述
提示
如何停用组织结构图的展开/折叠功能？
这个用例的灵感来自于这个问题。感谢robert和ActiveScottShaw的建设性讨论
用户可以使用className“noncollapsable”启用/禁用exapand/collapse功能，如下所示。
为什么根节点不见了？
当我有一个启用了“平移”选项的巨大组织图时，如果我隐藏了其中一个最上面的父母的所有孩子，那么该图表就会从屏幕上消失。我们似乎需要添加一个重置按钮来保持图表的可见性。
有关详细信息，请参阅手册84打开的问题
用户可以将任何清除逻辑嵌入到重置按钮的点击处理程序中，如下所示。
浏览器兼容性
Featherlight是一个非常轻量级的jQuery灯箱插件。它'；它简单而灵活，易于使用。Featherlight具有最小的css，并且不使用内联样式，所有内容都以名称分隔，它'；s完