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

jQuery组织结构图表插件OrgChart

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

点击下载预览效果

更多>

24小时阅读排行榜

更多>

最新教程

【web前端】Node.js快速入门

国外Web开发全栈课程全集

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

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

829 2024-04-18
python大神Mosh，零基础小白6小时完全入门

699 2024-04-10
MySQL 初学入门（mosh老师）

608 2024-04-07
Mock.js | Axios.js | Json | Ajax--十天精品课堂

1608 2024-03-29

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调用来完成数据的填充。