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文件。
<link rel="stylesheet" href="css/jquery.orgchart.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.orgchart.js"></script>

HTML结构

该组织结构图表插件的HTML结构使用一个<div>作为容器。
<div id="chart-container"></div>
使用本地数据

下面的代码使用本地数据作为组织结构图表的数据源。得到的效果如下图所示：
OrgChart组织结构图表动态图片-1
// 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'
});
使用Ajax远程数据

下面的代码通过Ajax来调用远程的数据作为组织结构图表的数据源。得到的效果如下图所示：
OrgChart组织结构图表动态图片-2
$('#chart-container').orgchart({
'data' : '/orgchart/initdata',
'depth': 2,
'nodeTitle': 'name',
'nodeContent': 'title'
});
延迟加载数据

下面的代码在用户点击相应的结点时才动态的通过Ajax来加载数据。得到的效果如下图所示：
OrgChart组织结构图表动态图片-3
var datascource = {
'id': '1',
'name': 'Su Miao',
'title': 'department manager',
'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 2 },
'children': [
{ 'id': '2','name': 'Tie Hua', 'title': 'senior engineer',
'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
{ 'id': '3','name': 'Hei Hei', 'title': 'senior engineer',
'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 1 }}
]
};

var ajaxURLs = {
'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) {
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);
}
});
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

OrgChart-简单实用的组织结构图表jQuery插件相关推荐

html 组织结构图表,OrgChart-简单实用的组织结构图表jQuery插件
OrgChart是一款简单实用的组织结构图表jQuery插件.OrgChart通过DOM元素,jQuery和CSS3过渡效果来制作组织结构图表.可以使用本地数据,或通过ajax调用来完成数据的填充. ...
html 可调节进度条控件,jQuery简单实用的轻量级进度条插件
jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效 ...
帝国 ajax评论插件,最简单实用的帝国cms评论插件
今天河南SEO为大家分享一个帝国评论插件本插件也是笔者在日常中总结的. 帝国cms评论仿畅言评论插件 1.支持(7.0&7.2)gbk.utf8两种编码,开源下载 2.增加了一套和畅言一样的表 ...
超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用......
为什么80%的码农都做不了架构师?>>> 日期:2012-10-15 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
2011年的32有用的jQuery插件
jQuery插件真正为开发人员很有帮助,今天分享的插件有很多你没有见到过的,但是非常实用的.这32个有用的的插件对你的开发很有帮助.如果你喜欢这些jQuery插件,记得收藏, JQUERY插件 jRu ...
超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
提升你网站水平的 jQuery 插件推荐
jQuery是一个优秀JavaScript库,它简化了HTML文档遍历,事件处理,动画和Ajax交互. jQuery的确改变了很多人写JavaScript的方式.如今,有很多现成的jQuery插件可供 ...
html页面时钟插件,Clock.jsHTML5模拟时钟jQuery插件
插件描述:clock.js是一款简单的HTML5模拟时钟jQuery插件.该HTML5模拟时钟基于Canvas制作,有3种内置的主题,它带有时钟表盘界面和数字刻度,简单实用. 使用方法使用该时钟插件 ...
html页面时钟插件,Clock.js-HTML5模拟时钟jQuery插件
clock.js是一款简单的HTML5模拟时钟jQuery插件.该HTML5模拟时钟基于Canvas制作,有3种内置的主题,它带有时钟表盘界面和数字刻度,简单实用. 使用方法使用该时钟插件需要在页面 ...

OrgChart-简单实用的组织结构图表jQuery插件

OrgChart-简单实用的组织结构图表jQuery插件相关推荐

最新文章

热门文章