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數據源時