-
- 好用简介的jQuery横向组织架构图插件OrgChart
苏州网站制作 苏州网站建设 苏州网站设计 苏州网站推广 项目中第一次遇到需要动态生成组织架构图，网上搜索到的插件多种多样，从简单到复杂的都有，今天苏州网站建设推荐一款jQuery组织架构图插件——OrgChart，这是一款简单实用的基于jQuery的组织结构图表插件。OrgChart通过DOM元素，jQuery和CSS3过渡效果来制作组织结构图表。可以使用本地数据，或通过ajax调用来完成数据的填充。可兼容Chrome、Firefox、Opera、Safari、IE9+浏览器。
OrgChart使用方法
使用OrgChart组织结构图表插件需要在页面中引入jquery.orgchart.css，jquery和html2canvas.js、jquery.orgchart.js文件。
<link rel="stylesheet" href="你的路径/jquery.orgchart.css" type="text/css"/>
<script type="text/javascript" src="你的路径/jquery.min.js"></script>
<script type="text/javascript" src="你的路径/html2canvas.js"></script>
<script type="text/javascript" src="你的路径/jquery.orgchart.js"></script>
HTML结构
该组织结构图表插件的HTML结构使用一个<div>作为容器。
<pre>
<div id="chart-container"></div>
</pre>
使用本地数据
<pre>
// 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'
});
</pre>
使用Ajax远程数据
下面的代码通过Ajax来调用远程的数据作为组织结构图表的数据源。
<pre>
$('#chart-container').orgchart({
'data' : '/orgchart/initdata',
'depth': 2,
'nodeTitle': 'name',
'nodeContent': 'title'
});
</pre>
还支持自定义节点。
下面的代码为组织结构图表中的每一个节点自定义一个头像
<pre>
$('#chart-container').orgchart({
'data' : datascource,
'depth': 2,
'nodeTitle': 'name',
'nodeContent': 'title',
'nodeID': 'id',
'createNode': function($node, data) {
var nodePrompt = $('<i>', {
'class': 'fa fa-info-circle second-menu-icon',
click: function() {
$(this).siblings('.second-menu').toggle();
}
});
var secondMenu = '<div class="second-menu"><img class="avatar" src="../img/avatar/' + data.id + '.jpg"></div>';
$node.append(nodePrompt).append(secondMenu);
}
});
</pre>
上面几个OrgChart实现的组织机构示意图效果源码，是一段可以实现组织机构示意图的代码，适合很多需要此功能的网站使用，需要此段代码及OrgChart插件的朋友们可以去下载使用。兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。苏州网站制作极力推荐。
- 上一篇： 一起了解下什么是jQuery UI 主题
- 下一篇： 实例教你怎么区分jquery中1个=和2个=以及3个=有什么不同，如何使用
- 好用简介的jQuery横向组织架构图插件OrgChart
