Skip to content

Commit ec739b1

Browse files
author
dabeng
committed
refactor the internal structure of orgchart plugin
1 parent aed6758 commit ec739b1

File tree

8 files changed

+671
-662
lines changed

8 files changed

+671
-662
lines changed

‎examples/css/jquery.orgchart.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
*/
1919

2020
.hidden {
21-
display: none;
21+
display: none!important;
2222
}
2323

2424
.orgchart {

‎examples/css/style.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,14 @@ body {
3232
}
3333

3434
.home-link {
35-
margin-top: 10px;
35+
margin-top: 20px;
36+
margin-right: 20px;
37+
float: right;
3638
}
3739

3840
.home-link a {
3941
font-size: 36px;
40-
color: #d43f3a;
42+
color: #d43f3a;
4143
text-decoration: none;
4244
}
4345

‎examples/edit-orgchart/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<title>Organization Chart Plugin</title>
9+
10+
<link rel="icon" type="image/x-icon" href="../img/logo.ico">
11+
<link rel="stylesheet" href="../css/font-awesome.min.css">
12+
<link rel="stylesheet" href="../css/jquery.orgchart.css">
13+
<link rel="stylesheet" href="../css/style.css">
14+
<link rel="stylesheet" href="style.css">
15+
16+
</head>
17+
<body>
18+
<div id="chart-container"></div>
19+
<div class="edit-panel first">
20+
<label for="rd-parent">parent node(root node):</label>
21+
<input type="text" class="new-node">
22+
<button type="button" id="btn-add-rootnode">Add</button>
23+
</div>
24+
<div class="edit-panel second">
25+
<label>selected node:</label>
26+
<input type="text" id="selected-node" disabled="true">
27+
<label>new node:</label>
28+
<ul id="new-nodelist">
29+
<li><input type="text" class="new-node"></li>
30+
</ul>
31+
<span id="node-type-panel">
32+
<input type="radio" name="node-type" id="rd-child" value="children"><label for="rd-child">Child</label>
33+
<input type="radio" name="node-type" id="rd-sibling" value="siblings"><label for="rd-sibling">Sibling</label>
34+
</span>
35+
<button type="button" id="btn-add-node">Add</button>
36+
<button type="button" id="btn-delete-node">Delete</button>
37+
</div>
38+
<div class="home-link">
39+
<a href="https://github.com/dabeng/OrgChart" >More orgcharts</a>
40+
<i class="fa fa-star"></i>
41+
</div>
42+
<script type="text/javascript" src="../js/jquery.min.js"></script>
43+
<script type="text/javascript" src="../js/html2canvas.min.js"></script>
44+
<script type="text/javascript" src="../js/jquery.orgchart.js"></script>
45+
<script type="text/javascript" src="scripts.js"></script>
46+
</body>
47+
</html>

‎examples/edit-orgchart/scripts.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
'use strict';
2+
3+
(function($){
4+
5+
$(function() {
6+
7+
var datascource = {
8+
'name': 'Ball game',
9+
'relationship': '001',
10+
'children': [
11+
{ 'name': 'Football', 'relationship': '110' },
12+
{ 'name': 'Basketball', 'relationship': '110' },
13+
{ 'name': 'Volleyball', 'relationship': '110' }
14+
]
15+
};
16+
17+
$('#chart-container').orgchart({
18+
'data' : datascource,
19+
'nodeTitle': 'name',
20+
'exportButton': true,
21+
'exportFilename': 'SportsChart',
22+
'parentNodeSymbol': 'fa-th-large',
23+
'createNode': function($node, data) {
24+
$node.on('click', function() {
25+
$('#selected-node').val(data.name).data('node', $node);
26+
});
27+
}
28+
});
29+
30+
$('#btn-add-rootnode').on('click', function() {
31+
var rootnodeVal = $('.edit-panel.first').find('.new-node').val().trim();
32+
if (!rootnodeVal.length) {
33+
alert('Please input value for parent node');
34+
return;
35+
}
36+
$('#chart-container').orgchart('addParent', $('#chart-container').find('.node:first'), { 'name': rootnodeVal });
37+
});
38+
39+
$('#btn-add-node').on('click', function() {
40+
var rootnodeVal = $('.edit-panel.second').find('.new-node').val().trim();
41+
var $node = $('#selected-node').data('node');
42+
if (!rootnodeVal.length) {
43+
alert('Please input value for new node');
44+
return;
45+
}
46+
if (!$node) {
47+
alert('Please select one node in orgchart');
48+
return;
49+
}
50+
var nodeType = $('input[name="node-type"]:checked');
51+
if (!nodeType.length) {
52+
alert('Please select a node type');
53+
return;
54+
}
55+
if (nodeType.val() === 'siblings') {
56+
$('#chart-container').orgchart('addSiblings', $node, {
57+
'siblings': [{ 'name': rootnodeVal, 'relationship': '110' }]
58+
});
59+
} else {
60+
var hasChild = $node.parent().attr('colspan') > 2 ? true : false;
61+
$('#chart-container').orgchart('addChildren', $node, {
62+
'children': [{ 'name': rootnodeVal, 'relationship': '1' + (hasChild ? 1 : 0) + '0' }]
63+
});
64+
}
65+
});
66+
67+
});
68+
69+
})(jQuery);

‎examples/edit-orgchart/style.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
#chart-container {
2+
background-color: #eee;
3+
height: 300px;
4+
}
5+
.orgchart {
6+
background: #fff;
7+
}
8+
9+
.orgchart .node {
10+
width: 180px;
11+
}
12+
13+
.orgchart .node .title {
14+
font-size: 24px;
15+
height: 30px;
16+
padding-top: 4px;
17+
}
18+
19+
.orgchart .node .title .symbol {
20+
margin-top: 1px;
21+
}
22+
23+
.edit-panel {
24+
position: relative;
25+
left: 10px;
26+
width: calc(100% - 20px);
27+
border-radius: 4px;
28+
float: left;
29+
margin-top: 10px;
30+
padding: 10px;
31+
color: #fff;
32+
font-size: 24px;
33+
}
34+
35+
.edit-panel input {
36+
font-size: 24px;
37+
width: 180px;
38+
}
39+
40+
.edit-panel.first {
41+
background-color: #337ab7;
42+
margin-top: 15px;
43+
}
44+
45+
.edit-panel.second {
46+
background-color: #449d44;
47+
}
48+
49+
.edit-panel label {
50+
font-weight: bold;
51+
}
52+
53+
#selected-node, .new-node {
54+
margin-right: 20px;
55+
}
56+
57+
.edit-panel button {
58+
color: #333;
59+
background-color: #fff;
60+
display: inline-block;
61+
padding: 6px 12px;
62+
margin-bottom: 0;
63+
font-size: 24px;
64+
line-height: 1.42857143;
65+
text-align: center;
66+
white-space: nowrap;
67+
vertical-align: middle;
68+
-ms-touch-action: manipulation;
69+
touch-action: manipulation;
70+
cursor: pointer;
71+
-webkit-user-select: none;
72+
-moz-user-select: none;
73+
-ms-user-select: none;
74+
user-select: none;
75+
background-image: none;
76+
border: 1px solid #ccc;
77+
border-radius: 4px;
78+
}
79+
80+
.edit-panel button:hover,.edit-panel button:focus,.edit-panel button:active {
81+
border-color: #eea236;
82+
box-shadow: 0 0 10px #eea236;
83+
}
84+
85+
#new-nodelist {
86+
display: inline-block;
87+
list-style:none;
88+
margin: 0;
89+
padding: 0;
90+
}
91+
92+
#node-type-panel {
93+
position: relative;
94+
top: 5px;
95+
}
96+
97+
#node-type-panel input[type='radio'] {
98+
display: inline-block;
99+
height: 28px;
100+
width: 28px;
101+
}
102+
103+
#node-type-panel input[type='radio']+label {
104+
vertical-align: super;
105+
}
106+
107+
#btn-add-node {
108+
margin-left: 20px;
109+
}

0 commit comments

Comments
 (0)