<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery组织结构图表插件OrgChart - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/jquery.orgchart.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="zzsc-container">
<header class="zzsc-header">
<div class="zzsc-demo center">
<a href="index.html">local-datasource</a>
<a href="index2.html">ajax-datasource</a>
<a href="index3.html" class="current">ondemand-loading-data</a>
<a href="index4.html">option-createNode</a>
</div>
</header>
</div>
<div id="chart-container"></div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.mockjax.min.js"></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() {
$.mockjax({
url: '/orgchart/children/3/',
contentType: 'application/json',
responseTime: 1000,
responseText: { 'children': [
{ 'id': '4', 'name': 'Pang Pang', 'title': 'engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
{ 'id': '5', 'name': 'Xiang Xiang', 'title': 'UE engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }}
]}
});
$.mockjax({
url: '/orgchart/parent/1/',
contentType: 'application/json',
responseTime: 1000,
responseText: { 'id': '6','name': 'Lao Lao', 'title': 'general manager', 'relationship': { 'children_num': 8 }}
});
$.mockjax({
url: '/orgchart/siblings/1/',
contentType: 'application/json',
responseTime: 1000,
responseText: { 'siblings': [
{ 'id': '7','name': 'Bo Miao', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '8', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '9', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '10', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '11', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '12', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '13', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}
]}
});
$.mockjax({
url: '/orgchart/families/1/',
contentType: 'application/json',
responseTime: 1000,
responseText: {
'id': '6',
'name': 'Lao Lao',
'title': 'general manager',
'relationship': { 'children_num': 8 },
'children': [
{ 'id': '7','name': 'Bo Miao', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '8', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '9', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '10', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '11', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '12', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
{ 'id': '13', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}
]}
});
var datascource = {
'id': '1',
'name': 'Su Miao',
'title': 'department manager',
'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 7 },
'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'
});
});
})(jQuery);
</script>
</body>
</html>
jQuery组织结构图表插件OrgChart.zip
版权申诉
139 浏览量
2022-11-24
12:30:57
上传
评论
收藏 722KB ZIP 举报
jQuery组织结构图表插件OrgChart.zip （37个子文件） 
jQuery组织结构图表插件OrgChart 
jQuery组织结构图表插件OrgChart.jpg 58KB jiaoben4036 css 
zzsc-demo.css 5KB jquery.orgchart.css 5KB font-awesome.min.css 27KB style.css 1KB normalize.css 2KB
index4.html 4KB img avatar 8.jpg 6KB 2.jpg 5KB 1.jpg 5KB 6.jpg 6KB 3.jpg 5KB 5.jpg 8KB 11.jpg 6KB 4.jpg 23KB 10.jpg 7KB 13.jpg 7KB 12.jpg 5KB 9.jpg 6KB 7.jpg 23KB fonts icomoon.woff 1KB fontawesome-webfont.eot 69KB fontawesome-webfont.woff 82KB
icomoon.svg 2KB FontAwesome.otf 107KB fontawesome-webfont.svg 357KB icomoon.eot 2KB fontawesome-webfont.woff2 65KB fontawesome-webfont.ttf 139KB icomoon.ttf 1KB index.html 3KB js jquery.mockjax.min.js 9KB html2canvas.js 87KB jquery.orgchart.js 34KB jquery-2.1.1.min.js 82KB index2.html 3KB index3.html 5KB资源评论
