orgChart.js组织架构图

OrgChart.js是什么？

基于ES6的组织结构图插件。

特征

支持本地数据和远程数据（JSON）。

基于CSS3过渡的平滑扩展/折叠效果。

将图表对齐为4个方向。

允许用户通过拖放节点更改组织结构。

允许用户动态编辑组织图并将最终层次结构保存为JSON对象。

支持将图表导出为图片。

支持平移和缩放

用户可以采用多种解决方案来构建庞大的组织结构图（请参考多层或混合布局部分）

支持触摸的移动设备插件

使用

<link rel="stylesheet" href="../css/jquery.orgchart.css">
 
<script type="text/javascript" src="../js/jquery.orgchart.js"></script>

下载地址
GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
案例

1.本地直接生成

hrml代码

  <div id="chart-container"></div>
 

js代码

(function($){
  $(function() {
    var datascource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Pang Pang', 'title': 'engineer' },
                { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'name': 'Yu Jie', 'title': 'department manager' },
        { 'name': 'Yu Li', 'title': 'department manager' },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Yu Wei', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' },
        { 'name': 'Yu Tie', 'title': 'department manager' }
      ]
    };
    $('#chart-container').orgchart({
      'data' : datascource, //数据
      'nodeContent': 'title' //内容对应的字段
    });
  });
})(jQuery)

效果如下：

选项

方法
在制定容器加入组织架构图：
var oc = $container.orgchart(options);

组织架构图初始化和重载：
init(newOptions)

为当前组织架构图添加父节点:
.addParent（root，data）
-root:dom节点,默认指向根节点，用于覆盖出事选项
-data:json对象，用于构建根节点的数据源

为指定节点添加兄弟节点:
.addSiblings（node，data）
-node:dome节点，基于此节点添加兄弟节点
-data:用于构建兄弟节点的数据源

为制定节点添加子节点
.addChildren（node，data）
-node:dome节点，基于此节点添加子节点
-data:用于构建子节点的数据源

删除指定节点
.removeNodes（node）
-node:dome节点，要删除的

获取orgchart的层次结构关系,例如，在编辑组织结构图之后，您可以将此方法的返回值发送到服务器端并保存orghcart的新状态。
.getHierarchy（）

以编程方式隐藏任何特定节点（.node元素）的子节点
##### .hideChildren（node）

以编程方式显示任何特定节点（.node元素）的子节点
.showChildren（node）

以编程方式隐藏任何特定节点（.node元素）的兄弟节点
.hideSiblings（node，direction）

以编程方式显示任何特定节点（.node元素）的兄弟节点
.showSiblings（node，direction）

此方法返回相关节点的显示状态
.getNodeState（node，relation）

返回与指定节点相关的节点
getRelatedNodes($node, relation)

用于放大缩小图表
setChartScale($chart, newScale)

许您将当前组织结构导出为png或pdf文件
export(exportFilename, exportFileextension)

作者：她的昵称w
链接：https://www.jianshu.com/p/094c2256c5ed
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。