OrgChart树组件

最新推荐文章于 2024-09-13 21:46:11 发布

lijwsunyt

最新推荐文章于 2024-09-13 21:46:11 发布

阅读量65

点赞数

文章标签：前端 javascript linux 数据库开发语言

本文链接：https://blog.csdn.net/lijiawei111/article/details/131930081

版权

源码和包下载地址：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     }