orgChart实现多重树状图结构

OrgChart.js是什么？

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

特征

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

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

将图表对齐为4个方向。

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

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

支持将图表导出为图片。

支持平移和缩放

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

支持触摸的移动设备插件

使用

下载地址
https://github.com/dabeng/OrgChart

css:

<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/jquery.orgchart.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="style.css">

html:

  <div id="chart-container"></div>
  <div id="edit-panel" class="view-state">
    <span id="chart-state-panel" class="radio-panel">
      <input type="radio" name="chart-state" id="rd-view" value="view" checked="true"><label for="rd-view">View</label>
      <input type="radio" name="chart-state" id="rd-edit" value="edit"><label for="rd-edit">Edit</label>
    </span>
    <label class="selected-node-group">selected node:</label>
    <input type="text" id="selected-node" class="selected-node-group">
    <label>new node:</label>
    <ul id="new-nodelist">
      <li><input type="text" class="new-node"></li>
    </ul>
    <i class="fa fa-plus-circle btn-inputs" id="btn-add-input"></i>
    <i class="fa fa-minus-circle btn-inputs" id="btn-remove-input"></i>
    <span id="node-type-panel" class="radio-panel">
      <input type="radio" name="node-type" id="rd-parent" value="parent"><label for="rd-parent">Parent(root)</label>
      <input type="radio" name="node-type" id="rd-child" value="children"><label for="rd-child">Child</label>
      <input type="radio" name="node-type" id="rd-sibling" value="siblings"><label for="rd-sibling">Sibling</label>
    </span>
    <button type="button" id="btn-add-nodes">Add</button>
    <button type="button" id="btn-delete-nodes">Delete</button>
    <button type="button" id="btn-reset">Reset</button>
  </div>
  
 

js:

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/html2canvas.min.js"></script>
<script type="text/javascript" src="../js/jquery.orgchart.js"></script>
<script type="text/javascript" src="scripts.js"></script>

orgchart参数及其含义详解：

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数据源时