当前位置：首页 > 下载站 > js特效 > jQuery特效 > jQuery组织结构图表插件OrgChart

jQuery组织结构图表插件OrgChart

分类: js特效 / jQuery特效	发布时间: 2018-01-12	访问量: 1916
下载量: 67

点击下载预览效果

更多>

24小时阅读排行榜

更多>

最新教程

支付宝沙箱支付（个人也能用的支付）

麻省理工大佬Python课程

9420 2024-05-31
Swoole5 Hyperf3 php8新版本协程框架讲说

12014 2024-05-13
【web前端】Node.js快速入门

7888 2024-04-26
国外Web开发全栈课程全集

7817 2024-04-24
Go语言实战之 GraphQL

5618 2024-04-19
550W粉丝大佬手把手从零学JavaScript

6427 2024-04-18

jQuery组织结构图表插件OrgChart

js代码

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
<script type="text/javascript">
'use strict';
(function($){
  $(function() {
	var datascource = {
	  'name': 'Lao Lao',
	  'title': 'general manager',
	  'relationship': { 'children_num': 8 },
	  'children': [
		{ 'name': 'Bo Miao', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
		{ 'name': 'Su Miao', 'title': 'department manager', 'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 7 },
		  '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': 2, 'parent_num': 1,'sibling_num': 1 },
			  'children': [
				{ 'name': 'Pang Pang', 'title': 'engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
				{ 'name': 'Xiang Xiang', 'title': 'UE 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': 7 }},
		{ 'name': 'Yu Li', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
		{ 'name': 'Hong Miao', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
		{ 'name': 'Yu Wei', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
		{ 'name': 'Chun Miao', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
		{ 'name': 'Yu Tie', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}
	  ]
	};

	$('#chart-container').orgchart({
	  'data' : datascource,
	  'depth': 2,
	  'nodeTitle': 'name',
	  'nodeContent': 'title'
	});

  });

})(jQuery);
</script>

jQuery组织结构图表插件OrgChart组织结构布局代码是一款可以使用本地数据，或通过ajax调用来完成数据的填充。