基于jQuery组织结构特效插件OrgChart

基于jQuery组织结构特效插件OrgChart

gt是一款简单实用的组织结构图表jQuery插件。gt通过DOM元素,jQuery和CSS3过渡效果来制作组织结构图表。可以使用本地数据,或通过ajax调用来完成数据的填充。

使用方法
使用OrgChart组织结构图表插件需要在页面中引入jquery.orgchart.css,jquery和html2canvas.js、jquery.orgchart.js文件。

1
2
3
4
<link rel="stylesheet" href="css/jquery.orgchart.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>              
<script type="text/javascript" src="js/jquery.orgchart.js"></script>

HTML结构
该组织结构图表插件的HTML结构使用一个

作为容器。

1
<div id="chart-container"></div>

使用本地数据
下面的代码使用本地数据作为组织结构图表的数据源。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// sample of core source code
var datascource = {
  'name': 'Lao Lao',
  'title': 'general manager',
  'relationship': { 'children_num': 3 },
  'children': [
    { 'name': 'Bo Miao', 'title': 'department manager',
      'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 2 }},
    { 'name': 'Su Miao', 'title': 'department manager',
      'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 2 },
      'children': [
        { 'name': 'Tie Hua', 'title': 'senior engineer',
          'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
        { 'name': 'Hei Hei', 'title': 'senior engineer',
          'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }}
      ]
    },
    { 'name': 'Yu Jie', 'title': 'department manager',
      'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 2 }}
  ]
};
 
$('#chart-container').orgchart({
  'data' : datascource,
  'depth': 2,
  'nodeTitle': 'name',
  'nodeContent': 'title'
});

使用Ajax远程数据
下面的代码通过Ajax来调用远程的数据作为组织结构图表的数据源。

1
2
3
4
5
6
$('#chart-container').orgchart({
  'data' : '/orgchart/initdata',
  'depth': 2,
  'nodeTitle': 'name',
  'nodeContent': 'title'
});
  • 支持本地数据和远程数据(JSON)。
  • 基于CSS3过渡的平滑扩展/折叠效果。
  • 将图表对齐为4个方向。
  • 允许用户通过拖放节点更改组织结构。
  • 允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
  • 支持将图表导出为图片或pdf文档。
  • 支持平移和缩放
  • 用户可以采用多种解决方案来构建庞大的组织结构图(请参考多层或混合布局部分)
  • 支持触摸的移动设备插件
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论