Skip to content

Commit 5feffb8

Browse files
bigeyexbigeyex
bigeyex
authored and
bigeyex
committed
org chart plugin
1 parent 95d325e commit 5feffb8

File tree

7 files changed

+502
-0
lines changed

7 files changed

+502
-0
lines changed

‎README.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,81 @@ jquery.orgChart
22
===============
33

44
jquery plugin for org chart, use a javascript array as input.
5+
inspired by https://github.com/caprica/jquery-orgchart
6+
7+
[see a demo here](http://www.mit.edu/~wangyu/jquery.orgChart/example.html)
8+
9+
Usage
10+
-----
11+
12+
1. set up a <div/> as the container of org chart:
13+
14+
```html
15+
<div id="orgChart"></div>
16+
```
17+
18+
2. prepare your data in this format:
19+
20+
```javascript
21+
var testData = [
22+
{id: 1, name: 'Acme Organization', parent: 0},
23+
{id: 2, name: 'CEO Office', parent: 1},
24+
{id: 3, name: 'Division 1', parent: 1},
25+
{id: 4, name: 'Division 2', parent: 1},
26+
{id: 6, name: 'Division 3', parent: 1},
27+
{id: 7, name: 'Division 4', parent: 1},
28+
{id: 8, name: 'Division 5', parent: 1},
29+
{id: 5, name: 'Sub Division', parent: 3},
30+
];
31+
```
32+
33+
Every node is an object with (in minimum) id, name, and parent.
34+
35+
3. build orgnizational chart with:
36+
37+
```javascript
38+
var orgChart = $('#orgChart').orgChart({data: testData});
39+
```
40+
41+
the object return by the jQuery function could be used to invoke methods.
42+
43+
44+
Option List
45+
-----------
46+
47+
All the options are optional.
48+
49+
data: (Array) the initial data of the org chart.
50+
51+
showControls: (Boolean/false) on/off for display add or remove node button.
52+
53+
allowEdit: (Boolean/false) on/off for allowing users to click on the node's title to edit its name.
54+
55+
onAddNode(node): (Function) callback function when "Add Child" button is clicked. Note that this will prevent the node from automatically created, so developers need to call newNode(parentId) to actually create the node.
56+
57+
onDeleteNode(node): (Function) callback function when "Delete Node" button is clicked. Note that this will prevent the node from automatically deleted, so developers need to call deleteNode(id) to actually delete the node.
58+
59+
onClickNode(node): (Function) callback when a node is clicked.
60+
61+
newNodeText: (String/"Add Child") text displayed on the "Add Child" button.
62+
63+
Note that in the callback options "onAddNode", "onDeleteNode", "onClickNode", a Node object will be passed as the parameter. You can access the data via node.data.
64+
65+
66+
Methods
67+
-------
68+
69+
startEdit(id): let a node enter edit mode.
70+
71+
newNode(parentId): create a node as a subnode of node number parentId.
72+
73+
addNode(data): add a node carrying specific data.
74+
75+
deleteNode(id): delete the node with specific id.
76+
77+
getData(): get all the node data of the org chart in an array.
78+
79+
80+
License
81+
-------
82+
MIT

‎add.png‎

1.63 KB
Loading

‎delete.png‎

1.63 KB
Loading

‎example.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>OrgChart Example</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
7+
<link href="jquery.orgchart.css" media="all" rel="stylesheet" type="text/css" />
8+
<style type="text/css">
9+
#orgChart{
10+
width: auto;
11+
height: auto;
12+
}
13+
14+
#orgChartContainer{
15+
width: 1000px;
16+
height: 500px;
17+
overflow: auto;
18+
background: #eeeeee;
19+
}
20+
21+
</style>
22+
</head>
23+
<body>
24+
<div id="orgChartContainer">
25+
<div id="orgChart"></div>
26+
</div>
27+
<div id="consoleOutput">
28+
</div>
29+
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
30+
<script type="text/javascript" src="jquery.orgchart.js"></script>
31+
<script type="text/javascript">
32+
var testData = [
33+
{id: 1, name: 'Acme Organization', parent: 0},
34+
{id: 2, name: 'CEO Office', parent: 1},
35+
{id: 3, name: 'Division 1', parent: 1},
36+
{id: 4, name: 'Division 2', parent: 1},
37+
{id: 6, name: 'Division 3', parent: 1},
38+
{id: 7, name: 'Division 4', parent: 1},
39+
{id: 8, name: 'Division 5', parent: 1},
40+
{id: 5, name: 'Sub Division', parent: 3},
41+
42+
];
43+
$(function(){
44+
org_chart = $('#orgChart').orgChart({
45+
data: testData,
46+
showControls: true,
47+
allowEdit: true,
48+
onAddNode: function(node){
49+
log('Created new node on node '+node.data.id);
50+
org_chart.newNode(node.data.id);
51+
},
52+
onDeleteNode: function(node){
53+
log('Deleted node '+node.data.id);
54+
org_chart.deleteNode(node.data.id);
55+
},
56+
onClickNode: function(node){
57+
log('Clicked node '+node.data.id);
58+
}
59+
60+
});
61+
});
62+
63+
// just for example purpose
64+
function log(text){
65+
$('#consoleOutput').append('<p>'+text+'</p>')
66+
}
67+
</script>
68+
</body>
69+
</html>

‎jquery-1.11.1.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery.orgchart.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
div.orgChart {
2+
margin : 10px;
3+
padding : 20px;
4+
}
5+
6+
div.orgChart h2 {
7+
margin : 0px;
8+
font-size : 16px;
9+
font-weight: normal;
10+
min-height: 20px;
11+
}
12+
13+
div.orgChart h2:hover {
14+
background: #fcfaca;
15+
cursor: text;
16+
}
17+
18+
div.orgChart ul {
19+
list-style : none;
20+
margin : 4px;
21+
padding : 0px;
22+
font-size : 0.8em;
23+
text-align : left;
24+
}
25+
26+
div.orgChart ul.stack,
27+
div.orgChart ul.stack ul {
28+
text-align : center;
29+
}
30+
31+
div.orgChart table {
32+
width : 100%;
33+
}
34+
35+
div.orgChart tr.lines td.line {
36+
width : 1px;
37+
height : 20px;
38+
}
39+
40+
div.orgChart tr.lines td.top {
41+
border-top : 1px dashed black;
42+
}
43+
44+
div.orgChart tr.lines td.left {
45+
border-right : 1px dashed black;
46+
}
47+
48+
div.orgChart tr.lines td.right {
49+
border-left : 0px dashed black;
50+
}
51+
52+
div.orgChart tr.lines td.half {
53+
width : 50%;
54+
}
55+
56+
57+
div.orgChart td {
58+
text-align : center;
59+
vertical-align : top;
60+
padding : 0px 2px;
61+
}
62+
63+
div.orgChart div.node {
64+
cursor : default;
65+
border : 1px solid #e7e7e7;
66+
display : inline-block;
67+
padding : 5px;
68+
width : 96px;
69+
height : 60px;
70+
background: #ffffff; /* Old browsers */
71+
background: -moz-linear-gradient(top, #ffffff 0%, #fbfbfb 100%); /* FF3.6+ */
72+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fbfbfb)); /* Chrome,Safari4+ */
73+
background: -webkit-linear-gradient(top, #ffffff 0%,#fbfbfb 100%); /* Chrome10+,Safari5.1+ */
74+
background: -o-linear-gradient(top, #ffffff 0%,#fbfbfb 100%); /* Opera 11.10+ */
75+
background: -ms-linear-gradient(top, #ffffff 0%,#fbfbfb 100%); /* IE10+ */
76+
background: linear-gradient(to bottom, #ffffff 0%,#fbfbfb 100%); /* W3C */
77+
line-height : 1.3em;
78+
border-radius : 4px;
79+
-moz-border-radius : 4px;
80+
-webkit-border-radius : 4px;
81+
position: relative;
82+
box-shadow: 1px 1px 0px #ddd;
83+
}
84+
85+
.org-add-button, .org-del-button, .org-confirm-del-button{
86+
position: absolute;
87+
font-size: 12px;
88+
}
89+
90+
.org-add-button{
91+
bottom: 3px;
92+
left: 5px;
93+
padding-left: 13px;
94+
background: url(./add.png) no-repeat 0 3px;
95+
96+
}
97+
98+
.org-add-button:hover, .org-del-button:hover{
99+
background-color: #eef;
100+
border-radius: 2px;
101+
cursor: pointer;
102+
}
103+
104+
.org-del-button{
105+
background: url(./delete.png) no-repeat;
106+
width: 12px;
107+
height: 12px;
108+
bottom: 7px;
109+
right: 5px;
110+
}
111+
112+
.org-input{
113+
width: 90px;
114+
}
115+
116+
.org-confirm-del-button{
117+
display: none;
118+
}

0 commit comments

Comments
 (0)