Skip to content

Commit f401bc7

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

19 files changed

+129
-759
lines changed

‎demo/family-tree.html‎

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,36 @@
77
<link rel="stylesheet" href="css/jquery.orgchart.css">
88
<link rel="stylesheet" href="css/style.css">
99
<style type="text/css">
10-
#chart-container { height: 600px; }
1110
.orgchart { background: #fff; }
11+
#chart-container {
12+
height: 800px;
13+
}
14+
.orgchart .node {
15+
padding: 3px 8px;
16+
/* box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px; */
17+
}
18+
.orgchart .node .avatar {
19+
box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
20+
}
21+
.orgchart .couple:has(> .nodes) > .node:first-child::after {
22+
top: 148px;
23+
}
24+
.orgchart .couple::after {
25+
top: 148px;
26+
width: 30px;
27+
left: calc(50% - 15px);
28+
}
29+
.orgchart .couple:first-child:not(:only-child)::before {
30+
width: calc(100% - 74px);
31+
left: 74px;
32+
}
33+
.orgchart .hierarchy.couple:only-child::before {
34+
width: 152px;
35+
left: calc(50% - 76px);
36+
}
37+
.orgchart .couple:last-child:not(:only-child)::before {
38+
width: calc(50% + 76px);
39+
}
1240
</style>
1341
</head>
1442
<body>
@@ -21,33 +49,33 @@
2149

2250
var datascource = [
2351
[
24-
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
52+
{ 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
2553
{
26-
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
54+
'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
2755
'children': [
2856
[
29-
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female' },
30-
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true }
57+
{ 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
3158
],
3259
[
33-
{ 'id': '5', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female',
60+
{ 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
3461
'children': [
3562
[
36-
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
63+
64+
{ 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
3765
'children': [
38-
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer', 'gender': 'female' }],
39-
[{ 'id': '8', 'name': 'Er Dan', 'title': 'engineer', 'gender': 'female' }],
66+
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
67+
[{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
4068
]
4169
},
42-
{ 'id': '9', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
43-
{ 'id': '10', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true}
70+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
4471
]
4572
]
4673
},
47-
{ 'id': '11', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male', 'outsider': true }
74+
{ 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
4875
],
49-
[{ 'id': '12', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
50-
[{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]
76+
[
77+
{ 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
78+
]
5179
]
5280
}
5381
]
@@ -56,6 +84,10 @@
5684
var oc = $('#chart-container').orgchart({
5785
'data' : datascource,
5886
'nodeContent': 'title',
87+
'nodeID': 'id',
88+
'createNode': function($node, data) {
89+
$node.prepend(`<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
90+
}
5991
});
6092

6193

‎demo/family-tree1.html‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎demo/family-tree10.html‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎demo/family-tree11.html‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎demo/family-tree2.html‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎demo/family-tree3.html‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎demo/family-tree4.html‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

0 commit comments

Comments
 (0)