OrgChart-简单实用的组织结构图表jQuery插件
插件介绍
OrgChart是一款简单实用的组织结构图表jQuery插件。OrgChart通过DOM元素，jQuery和CSS3过渡效果来制作组织结构图表。可以使用本地数据，或通过ajax调用来完成数据的填充。
简要教程
OrgChart是一款简单实用的组织结构图表jQuery插件。OrgChart通过DOM元素，jQuery和CSS3过渡效果来制作组织结构图表。可以使用本地数据，或通过ajax调用来完成数据的填充。
使用方法
使用OrgChart组织结构图表插件需要在页面中引入jquery.orgchart.css，jquery和html2canvas.js、jquery.orgchart.js文件。
<linkrel="stylesheet"href="css/jquery.orgchart.css"type="text/css"/>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/html2canvas.js"></script>
<scripttype="text/javascript"src="js/jquery.orgchart.js"></script>
HTML结构
该组织结构图表插件的HTML结构使用一个<div>作为容器。
<divid="chart-container"></div>
使用本地数据
下面的代码使用本地数据作为组织结构图表的数据源。得到的效果如下图所示：
OrgChart组织结构图表动态图片-1
//sampleofcoresourcecode
vardatascource={
'name':'LaoLao',
'title':'generalmanager',
'relationship':{'children_num':3},
'children':[
{'name':'BoMiao','title':'departmentmanager',
'relationship':{'children_num':0,'parent_num':1,'sibling_num':2}},
{'name':'SuMiao','title':'departmentmanager',
'relationship':{'children_num':2,'parent_num':1,'sibling_num':2},
'children':[
{'name':'TieHua','title':'seniorengineer',
'relationship':{'children_num':0,'parent_num':1,'sibling_num':1}},
{'name':'HeiHei','title':'seniorengineer',
'relationship':{'children_num':0,'parent_num':1,'sibling_num':1}}
]
},
{'name':'YuJie','title':'departmentmanager',
'relationship':{'children_num':0,'parent_num':1,'sibling_num':2}}
]
};
$('#chart-container').orgchart({
'data':datascource,
'depth':2,
'nodeTitle':'name',
'nodeContent':'title'
});
使用Ajax远程数据
下面的代码通过Ajax来调用远程的数据作为组织结构图表的数据源。得到的效果如下图所示：
OrgChart组织结构图表动态图片-2
$('#chart-container').orgchart({
'data':'/orgchart/initdata',
'depth':2,
'nodeTitle':'name',
'nodeContent':'title'
});
延迟加载数据
下面的代码在用户点击相应的结点时才动态的通过Ajax来加载数据。得到的效果如下图所示：
OrgChart组织结构图表动态图片-3
vardatascource={
'id':'1',
'name':'SuMiao',
'title':'departmentmanager',
'relationship':{'children_num':2,'parent_num':1,'sibling_num':2},
'children':[
{'id':'2','name':'TieHua','title':'seniorengineer',
'relationship':{'children_num':0,'parent_num':1,'sibling_num':1}},
{'id':'3','name':'HeiHei','title':'seniorengineer',
'relationship':{'children_num':2,'parent_num':1,'sibling_num':1}}
]
};
varajaxURLs={
'children':'/orgchart/children/',
'parent':'/orgchart/parent/',
'siblings':'/orgchart/siblings/',
'families':'/orgchart/families/'
};
$('#chart-container').orgchart({
'data':datascource,
'ajaxURL':ajaxURLs,
'nodeTitle':'name',
'nodeContent':'title',
'nodeId':'id'
});
自定义数据节点
下面的代码为组织结构图表中的每一个节点自定义一个头像。得到的效果如下图所示：
OrgChart组织结构图表动态图片-4
$('#chart-container').orgchart({
'data':datascource,
'depth':2,
'nodeTitle':'name',
'nodeContent':'title',
'nodeID':'id',
'createNode':function($node,data){
varnodePrompt=$('<i>',{
'class':'fafa-info-circlesecond-menu-icon',
click:function(){
$(this).siblings('.second-menu').toggle();
}
});
varsecondMenu='<divclass="second-menu"><imgclass="avatar"src="../img/avatar/'+data.id+'.jpg"></div>';
$node.append(nodePrompt).append(secondMenu);
}
});
OrgChart组织结构图表插件的github地址为:https://github.com/dabeng/OrgChart
本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/jQuery/Chart/201602233135.html
原文地址：http://www.htmleaf.com/jQuery/Chart/201602233135.html#0-huaban-1-54829-a46a6d518beb2e5bf66279e3506e3905