今天使用orgChart沒有找到合適的，所以今天來寫篇使用文檔。
OrgChart.js是什么？
基于ES6的組織結構圖插件。
特征
支持本地數(shù)據(jù)和遠程數(shù)據(jù)（JSON）。
基于CSS3過渡的平滑擴展/折疊效果。
將圖表對齊為4個方向。
允許用戶通過拖放節(jié)點更改組織結構。
允許用戶動態(tài)編輯組織圖并將最終層次結構保存為JSON對象。
支持將圖表導出為圖片。
支持平移和縮放
用戶可以采用多種解決方案來構建龐大的組織結構圖（請參考多層或混合布局部分）
支持觸摸的移動設備插件
使用
<link rel="stylesheet" href="../css/jquery.orgchart.css">
<script type="text/javascript" src="../js/jquery.orgchart.js"></script>
下載地址
https://github.com/dabeng/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, //數(shù)據(jù)
'nodeContent': 'title' //內容對應的字段
});
});
})(jQuery)
效果如下：
選項
| 名稱 | 類型 | 必需 | 默認 | 描述 |
|---|---|---|---|---|
| data | json or string | yes | 數(shù)據(jù)源用于構建組織結構圖。 它可以是json對象或包含ajax請求發(fā)送到的URL的字符串。 | |
| pan | boolean | no | false | 如果用戶啟用此選項，則用戶可以通過鼠標拖放來平移組織結構圖。 |
| zoom | boolean | no | false | 如果用戶啟用此選項，用戶可以通過鼠標滾輪縮放/縮小組織結構圖。 |
| zoominLimit | number | no | 7 | 允許用戶設置放大限制。 |
| zoomoutLimit | number | no | 0.5 | 允許用戶設置縮小限制。 |
| direction | string | no | "t2b" | 可用值是t2b（暗示“從上到下”，它是默認值），b2t（暗示“從下到上”），l2r（暗示“從左到右”），r2l（暗示“從右到左”）。 |
| verticalLevel | integer(>=2) | no | 用戶可以使用此選項從指定級別垂直對齊節(jié)點。 | |
| toggleSiblingsResp | boolean | no | false | 啟用此選項后，用戶可以通過單擊左/右箭頭分別顯示/隱藏左/右兄弟節(jié)點。 |
| nodeTitle | string | no | "name" | 它將datasource的一個屬性設置為orgchart節(jié)點的title部分的文本內容。 實際上，用戶可以創(chuàng)建一個只有nodeTitle選項的簡單orghcart。 |
| nodeId | string | no | "id" | 它將datasource的一個屬性設置為每個orgchart節(jié)點的唯一標識符。 |
| parentNodeSymbol | string | no | "fa-users" 使用font awesome圖標表示該節(jié)點具有子節(jié)點。 | |
| ajaxURL | json | no | 它包括四個特性 ，父母，孩子，兄弟姐妹，家庭（要求父節(jié)點和兄弟節(jié)點）。 顧名思義，不同的propety提供了發(fā)送不同節(jié)點的ajax請求的URL。 | |
| nodeContent | string | no | 它將數(shù)據(jù)源的一個屬性設置為orgchart節(jié)點的內容部分的文本內容。 | |
| nodeTemplate | function | no | 它是一個模板生成函數(shù)，用于定制任何復雜的節(jié)點內部結構。 它只收到一個參數(shù)：“data”代表json datasoure，它將用于渲染一個節(jié)點。 | |
| createNode | function | no | 它是一個用于自定義每個orgchart節(jié)點的回調函數(shù)。 它收到兩個參數(shù)：“$node”代表單節(jié)點div的jquery對象; “data”代表單個節(jié)點的數(shù)據(jù)源。 | |
| exportButton | boolean | no | false | 它啟用了orgchart的導出按鈕。 |
| exportFilename | string | no | "Orgchart" | 將當前組織圖導出為圖片時，它是文件名。 |
| visibleLevel | positive | integer | no | 它表示在最開始的orgchart擴展到的級別。 |
| exportFileextension | string | no | "png" | 可用值為png和pdf。 |
| chartClass | string | no | "" | 當您想在一個頁面上實例化多個組織結構圖時，您應該為它們添加不同的類名以區(qū)分它們。 |
| draggable | boolean | no | false | 如果用戶啟用此選項，則可以拖放orgchart的節(jié)點。 注意：由于對HTML5拖放API的支持不足，此功能在IE上不起作用。 |
| dropCriteria | function | no | 用戶可以構建自己的標準來限制拖動節(jié)點和放置區(qū)域之間的關系。 此外，此函數(shù)接受三個參數(shù)（draggedNode，dragZone，dropZone），只返回boolen值。 | |
| initCompleted | function | no | 了解表的完全初始化，數(shù)據(jù)加載和呈現(xiàn)的時間通常很有用，尤其是在使用ajax數(shù)據(jù)源時。 它收到了一個參數(shù)：“$chart”代表初始化圖表的jquery對象。 |
方法
在制定容器加入組織架構圖：
var oc = $container.orgchart(options);
組織架構圖初始化和重載：
init(newOptions)
為當前組織架構圖添加父節(jié)點:
.addParent（root，data）
-root:dom節(jié)點,默認指向根節(jié)點，用于覆蓋出事選項
-data:json對象，用于構建根節(jié)點的數(shù)據(jù)源
為指定節(jié)點添加兄弟節(jié)點:
.addSiblings（node，data）
-node:dome節(jié)點，基于此節(jié)點添加兄弟節(jié)點
-data:用于構建兄弟節(jié)點的數(shù)據(jù)源
為制定節(jié)點添加子節(jié)點
.addChildren（node，data）
-node:dome節(jié)點，基于此節(jié)點添加子節(jié)點
-data:用于構建子節(jié)點的數(shù)據(jù)源
刪除指定節(jié)點
.removeNodes（node）
-node:dome節(jié)點，要刪除的
獲取orgchart的層次結構關系,例如，在編輯組織結構圖之后，您可以將此方法的返回值發(fā)送到服務器端并保存orghcart的新狀態(tài)。
.getHierarchy（）
以編程方式隱藏任何特定節(jié)點（.node元素）的子節(jié)點
##### .hideChildren（node）
以編程方式顯示任何特定節(jié)點（.node元素）的子節(jié)點
.showChildren（node）
以編程方式隱藏任何特定節(jié)點（.node元素）的兄弟節(jié)點
.hideSiblings（node，direction）
以編程方式顯示任何特定節(jié)點（.node元素）的兄弟節(jié)點
.showSiblings（node，direction）
此方法返回相關節(jié)點的顯示狀態(tài)
.getNodeState（node，relation）
返回與指定節(jié)點相關的節(jié)點
getRelatedNodes($node, relation)
用于放大縮小圖表
setChartScale($chart, newScale)
許您將當前組織結構導出為png或pdf文件
export(exportFilename, exportFileextension)
