PHP中文网-QQ群-扫二维码

QQ群

PHP中文网-关注微信公众号-扫二维码

微信公众号

当前位置:php中文网下载站 >js特效 >jQuery特效 >jQuery组织结构图表插件OrgChart

jQuery组织结构图表插件OrgChart

2018-01-12 来源/作者:php中文网 分类:jQuery特效 «» 下载次数:4
jQuery组织结构图表插件OrgChart

js代码

<script src="js/jquery-2.1.1.min.js?3.1.44" type="text/javascript"></script>
<script type="text/javascript" src="js/html2canvas.js?3.1.44"></script>
<script type="text/javascript" src="js/jquery.orgchart.js?3.1.44"></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调用来完成数据的填充。


申明:PHP中文网下载站匠心打造中国最大的免费下载站!一切资源免费,所有资源都经过检测,请放心下载!

效果预览本地下载  新手使用求助QQ群: