OrgChart樹組件

源碼和包下載地址：https://gitee.com/dabeng/OrgChart/tree/master

官網：Getting Started - Docs | BALKAN OrgChartJS

注意官網上下載的JS版本可能無法直接使用。

使用：

 1 $.mockjax({
 2         url: '/orgchart/initdata',
 3         responseTime: 1000,
 4         contentType: 'application/json',
 5         responseText: {
 6           'name': 'Lao Lao',
 7           'title': 'general manager',
 8           'children': [
 9             { 'name': 'Bo Miao', 'title': 'department manager' },
10             { 'name': 'Su Miao', 'title': 'department manager',
11               'children': [
12                 { 'name': 'Tie Hua', 'title': 'senior engineer' },
13                 { 'name': 'Hei Hei', 'title': 'senior engineer',
14                   'children': [
15                     { 'name': 'Pang Pang', 'title': 'engineer' },
16                     { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
17                   ]
18                 }
19               ]
20             },
21             { 'name': 'Yu Jie', 'title': 'department manager' },
22             { 'name': 'Yu Li', 'title': 'department manager' },
23             { 'name': 'Hong Miao', 'title': 'department manager' },
24             { 'name': 'Yu Wei', 'title': 'department manager' },
25             { 'name': 'Chun Miao', 'title': 'department manager' },
26             { 'name': 'Yu Tie', 'title': 'department manager' }
27           ]
28         }
29       });
30 
31       $('#chart-container').orgchart({
32         'data' : '/orgchart/initdata',
33         'nodeContent': 'title'
34       });

相關屬性和默認值：

 1 {
 2       'nodeTitle': 'name',
 3       'nodeId': 'id',
 4       'toggleSiblingsResp': false,
 5       'visibleLevel': 999,
 6       'chartClass': '',
 7       'exportButton': false,
 8       'exportFilename': 'OrgChart',
 9       'exportFileextension': 'png',
10       'parentNodeSymbol': 'fa-users',
11       'draggable': false,
12       'direction': 't2b',
13       'pan': false,
14       'zoom': false,
15       'zoominLimit': 7,
16       'zoomoutLimit': 0.5
17     }