Skip to content

Commit 9613772

Browse files
dabengdabeng
committed
WIP: implement family tree
1 parent a96e9bf commit 9613772

19 files changed

+742
-65
lines changed

‎demo/family-tree.html‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -33,38 +33,21 @@
3333
{ 'id': '5', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female',
3434
'children': [
3535
[
36-
3736
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
3837
'children': [
3938
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer', 'gender': 'female' }],
4039
[{ 'id': '8', 'name': 'Er Dan', 'title': 'engineer', 'gender': 'female' }],
41-
[{ 'id': '9', 'name': 'San Dan', 'title': 'engineer', 'gender': 'female' }]
4240
]
4341
},
44-
{ 'id': '10', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
45-
{ 'id': '11', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
46-
'children': [
47-
[{ 'id': '12', 'name': 'Si Dan', 'title': 'UE engineer', 'gender': 'female' }],
48-
[{ 'id': '13', 'name': 'Wu Dan', 'title': 'engineer', 'gender': 'female' }]
49-
]
50-
},
51-
{ 'id': '14', 'name': 'San Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
52-
'children': [
53-
[{ 'id': '15', 'name': 'Liu Dan', 'title': 'UE engineer', 'gender': 'female' }]
54-
]
55-
}
56-
],
57-
[
58-
{ 'id': '16', 'name': 'Er Hei', 'title': 'senior engineer', 'gender': 'male' },
59-
{ 'id': '17', 'name': 'Er Yuan', 'title': 'engineer', 'gender': 'female', 'outsider': true },
60-
{ 'id': '18', 'name': 'San Yuan', 'title': 'engineer', 'gender': 'female', 'outsider': true },
42+
{ 'id': '9', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
43+
{ 'id': '10', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true}
6144
]
6245
]
6346
},
64-
{ 'id': '19', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male', 'outsider': true }
47+
{ 'id': '11', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male', 'outsider': true }
6548
],
66-
[{ 'id': '20', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
67-
[{ 'id': '21', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]
49+
[{ 'id': '12', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
50+
[{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]
6851
]
6952
}
7053
]

‎demo/family-tree1.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Organization Chart Plugin</title>
6+
<link rel="icon" href="img/logo.png">
7+
<link rel="stylesheet" href="css/jquery.orgchart.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<style type="text/css">
10+
#chart-container { height: 600px; }
11+
.orgchart { background: #fff; }
12+
</style>
13+
</head>
14+
<body>
15+
<div id="chart-container"></div>
16+
17+
<script type="text/javascript" src="js/jquery.min.js"></script>
18+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
19+
<script type="text/javascript">
20+
$(function() {
21+
22+
var datascource = [
23+
[
24+
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
25+
{
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
27+
'children': [
28+
[
29+
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female' }
30+
]
31+
]
32+
}
33+
]
34+
];
35+
36+
var oc = $('#chart-container').orgchart({
37+
'data' : datascource,
38+
'nodeContent': 'title',
39+
});
40+
41+
42+
});
43+
</script>
44+
</body>
45+
</html>

‎demo/family-tree10.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Organization Chart Plugin</title>
6+
<link rel="icon" href="img/logo.png">
7+
<link rel="stylesheet" href="css/jquery.orgchart.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<style type="text/css">
10+
#chart-container { height: 600px; }
11+
.orgchart { background: #fff; }
12+
</style>
13+
</head>
14+
<body>
15+
<div id="chart-container"></div>
16+
17+
<script type="text/javascript" src="js/jquery.min.js"></script>
18+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
19+
<script type="text/javascript">
20+
$(function() {
21+
22+
var datascource = [
23+
[
24+
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
25+
{
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
27+
'children': [
28+
[
29+
30+
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
31+
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female'},
32+
{ 'id': '5', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
33+
{ 'id': '6', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
34+
{ 'id': '7', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
35+
{ 'id': '8', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
36+
{ 'id': '9', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
37+
{ 'id': '10', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
38+
{ 'id': '11', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
39+
]
40+
]
41+
}
42+
]
43+
];
44+
45+
var oc = $('#chart-container').orgchart({
46+
'data' : datascource,
47+
'nodeContent': 'title',
48+
});
49+
50+
51+
});
52+
</script>
53+
</body>
54+
</html>

‎demo/family-tree11.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Organization Chart Plugin</title>
6+
<link rel="icon" href="img/logo.png">
7+
<link rel="stylesheet" href="css/jquery.orgchart.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<style type="text/css">
10+
#chart-container { height: 600px; }
11+
.orgchart { background: #fff; }
12+
</style>
13+
</head>
14+
<body>
15+
<div id="chart-container"></div>
16+
17+
<script type="text/javascript" src="js/jquery.min.js"></script>
18+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
19+
<script type="text/javascript">
20+
$(function() {
21+
22+
var datascource = [
23+
[
24+
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
25+
{
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
27+
'children': [
28+
[
29+
30+
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
31+
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female'},
32+
{ 'id': '5', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
33+
]
34+
]
35+
}
36+
]
37+
];
38+
39+
var oc = $('#chart-container').orgchart({
40+
'data' : datascource,
41+
'nodeContent': 'title',
42+
});
43+
44+
45+
});
46+
</script>
47+
</body>
48+
</html>

‎demo/family-tree2.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Organization Chart Plugin</title>
6+
<link rel="icon" href="img/logo.png">
7+
<link rel="stylesheet" href="css/jquery.orgchart.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<style type="text/css">
10+
#chart-container { height: 600px; }
11+
.orgchart { background: #fff; }
12+
</style>
13+
</head>
14+
<body>
15+
<div id="chart-container"></div>
16+
17+
<script type="text/javascript" src="js/jquery.min.js"></script>
18+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
19+
<script type="text/javascript">
20+
$(function() {
21+
22+
var datascource = [
23+
[
24+
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
25+
{
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
27+
'children': [
28+
[
29+
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female'},
30+
{ 'id': '4', 'name': 'Tie Hua', 'title': 'department manager', 'gender': 'male', 'outsider': true },
31+
]
32+
]
33+
}
34+
]
35+
];
36+
37+
var oc = $('#chart-container').orgchart({
38+
'data' : datascource,
39+
'nodeContent': 'title',
40+
});
41+
42+
43+
});
44+
</script>
45+
</body>
46+
</html>

‎demo/family-tree3.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Organization Chart Plugin</title>
6+
<link rel="icon" href="img/logo.png">
7+
<link rel="stylesheet" href="css/jquery.orgchart.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<style type="text/css">
10+
#chart-container { height: 600px; }
11+
.orgchart { background: #fff; }
12+
</style>
13+
</head>
14+
<body>
15+
<div id="chart-container"></div>
16+
17+
<script type="text/javascript" src="js/jquery.min.js"></script>
18+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
19+
<script type="text/javascript">
20+
$(function() {
21+
22+
var datascource = [
23+
[
24+
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
25+
{
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
27+
'children': [
28+
[
29+
{ 'id': '4', 'name': 'Tie Hua', 'title': 'department manager', 'gender': 'male', 'outsider': true },
30+
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female'},
31+
]
32+
]
33+
}
34+
]
35+
];
36+
37+
var oc = $('#chart-container').orgchart({
38+
'data' : datascource,
39+
'nodeContent': 'title',
40+
});
41+
42+
43+
});
44+
</script>
45+
</body>
46+
</html>

‎demo/family-tree4.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+
<title>Organization Chart Plugin</title>
6+
<link rel="icon" href="img/logo.png">
7+
<link rel="stylesheet" href="css/jquery.orgchart.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<style type="text/css">
10+
#chart-container { height: 600px; }
11+
.orgchart { background: #fff; }
12+
</style>
13+
</head>
14+
<body>
15+
<div id="chart-container"></div>
16+
17+
<script type="text/javascript" src="js/jquery.min.js"></script>
18+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
19+
<script type="text/javascript">
20+
$(function() {
21+
22+
var datascource = [
23+
[
24+
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
25+
{
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
27+
'children': [
28+
[
29+
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female'},
30+
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
31+
{ 'id': '5', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
32+
]
33+
]
34+
}
35+
]
36+
];
37+
38+
var oc = $('#chart-container').orgchart({
39+
'data' : datascource,
40+
'nodeContent': 'title',
41+
});
42+
43+
44+
});
45+
</script>
46+
</body>
47+
</html>

‎demo/family-tree5.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Organization Chart Plugin</title>
6+
<link rel="icon" href="img/logo.png">
7+
<link rel="stylesheet" href="css/jquery.orgchart.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
<style type="text/css">
10+
#chart-container { height: 600px; }
11+
.orgchart { background: #fff; }
12+
</style>
13+
</head>
14+
<body>
15+
<div id="chart-container"></div>
16+
17+
<script type="text/javascript" src="js/jquery.min.js"></script>
18+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
19+
<script type="text/javascript">
20+
$(function() {
21+
22+
var datascource = [
23+
[
24+
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
25+
{
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
27+
'children': [
28+
[
29+
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female'},
30+
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
31+
{ 'id': '5', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
32+
{ 'id': '6', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true },
33+
]
34+
]
35+
}
36+
]
37+
];
38+
39+
var oc = $('#chart-container').orgchart({
40+
'data' : datascource,
41+
'nodeContent': 'title',
42+
});
43+
44+
45+
});
46+
</script>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)