Skip to content

Commit a718307

Browse files
dabengdabeng
authored
Merge pull request #761 from dabeng/family-tree
Family tree
2 parents 1f416ba + 8e806c2 commit a718307

10 files changed

+470
-124
lines changed

‎demo/family-tree.html

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
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+
.orgchart { background: #fff; }
11+
#chart-container {
12+
height: 850px;
13+
}
14+
.orgchart .node {
15+
padding: 3px 8px;
16+
}
17+
.orgchart .node .avatar {
18+
border-radius: 60px;
19+
box-shadow: rgba(99, 99, 99, 0.8) 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+
}
40+
</style>
41+
</head>
42+
<body>
43+
<div id="chart-container"></div>
44+
45+
<script type="text/javascript" src="js/jquery.min.js"></script>
46+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
47+
<script type="text/javascript">
48+
$(function() {
49+
50+
var datascource = [
51+
[
52+
{ 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
53+
{
54+
'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
55+
'children': [
56+
[
57+
{ 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
58+
],
59+
[
60+
{ 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
61+
'children': [
62+
[
63+
64+
{ 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
65+
'children': [
66+
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
67+
[{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
68+
]
69+
},
70+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
71+
]
72+
]
73+
},
74+
{ 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
75+
],
76+
[
77+
{ 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
78+
]
79+
]
80+
}
81+
]
82+
];
83+
84+
var oc = $('#chart-container').orgchart({
85+
'data' : datascource,
86+
'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+
}
91+
});
92+
93+
94+
});
95+
</script>
96+
</body>
97+
</html>

‎demo/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
background-color: #000;
1414
}
1515
section {
16-
width: 30rem;
16+
width: 36rem;
1717
margin-top: 200px;
1818
margin-left: auto;
1919
margin-right: auto;
@@ -147,6 +147,7 @@
147147
<li><a href="data-prop-hybrid.html" target="_blank">create hybrid chart with data prop "hybrid"</a></li>
148148
<li><a href="custom-icons.html" target="_blank">use fontawesome icons instead of built-in icons</a></li>
149149
<li><a href="data-prop-compact.html" target="_blank">layout for children which is too many</a></li>
150+
<li><a href="family-tree.html" target="_blank">visualize genealogy/pedigree/family tree information</a></li>
150151
</ol>
151152
</section>
152153
</body>

‎demo/option-createNode.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@
2121
.orgchart .node .second-menu {
2222
display: none;
2323
position: absolute;
24-
top: 0;
25-
right: -70px;
24+
bottom: -35px;
25+
right: 0;
2626
border-radius: 35px;
2727
box-shadow: 0 0 10px 1px #999;
2828
background-color: #fff;
29-
z-index: 1;
29+
z-index: 3;
3030
}
3131
.orgchart .node .second-menu .avatar {
3232
width: 60px;

‎dist/css/jquery.orgchart.css

Lines changed: 83 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
list-style: none;
8484
padding-left: 0;
8585
margin: 0;
86+
justify-content: center;
8687
}
8788

8889
.orgchart .hierarchy {
@@ -100,6 +101,62 @@
100101
box-sizing: border-box;
101102
}
102103

104+
/* 本姓人与上一层父母的连线，借助伪元素::before实现 */
105+
/* 处理同一层中特殊的首节点 */
106+
.orgchart .couple:first-child:not(:only-child)::before {
107+
width: calc(100% - 69px); /* half width of hierarchy - half width of node - node's padding - node's border width */
108+
left: 69px;
109+
}
110+
111+
/* 处理同一层中特殊的末节点 */
112+
.orgchart .couple:last-child:not(:only-child)::before {
113+
width: calc(50% + 71px);
114+
left: 0px;
115+
}
116+
117+
.orgchart .hierarchy.couple:only-child::before {
118+
width: 142px; /* half of node's width + link's width */
119+
left: calc(50% - 71px); /* half width of node - half of link width */
120+
}
121+
122+
/* 在family tree中，一个夫妻组合里，本姓人只有一个，外姓人可能有多个 */
123+
/* 我们通过水平的连线来表示他们存在婚姻关系，借助伪元素::after实现 */
124+
.orgchart .hierarchy.spouse:not(.couple)::after {
125+
content: "";
126+
position: absolute;
127+
border-top: 2px solid rgba(217, 83, 79, 0.8);
128+
box-sizing: border-box;
129+
z-index: 0;
130+
top: 24px;
131+
width: var(--ft-width);
132+
left: var(--ft-left-offset);
133+
}
134+
135+
/* 一夫一妻情况下的连线 */
136+
.orgchart .couple {
137+
white-space: nowrap;
138+
}
139+
140+
.orgchart .couple:has(> .nodes) > .node:first-child::after {
141+
content: "";
142+
position: absolute;
143+
top: 24px;
144+
left: calc(100% + 1px);
145+
width: 2px;
146+
height: 33px;
147+
background-color: rgba(217, 83, 79, 0.8);
148+
}
149+
.orgchart .couple::after {
150+
content: "";
151+
position: absolute;
152+
border-top: 2px solid rgba(217, 83, 79, 0.8);
153+
box-sizing: border-box;
154+
z-index: 0;
155+
top: 24px;
156+
width: 20px;
157+
left: calc(50% - 10px); /* half of hierarchy - node's padding width - node's border with */
158+
}
159+
103160
.orgchart .hierarchy:first-child::before,
104161
.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
105162
left: calc(50% - 1px);
@@ -111,7 +168,7 @@
111168
width: calc(50% + 1px);
112169
}
113170

114-
.orgchart .hierarchy:not(.hidden):only-child::before {
171+
.orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before {
115172
width: 2px;
116173
}
117174

@@ -122,17 +179,17 @@
122179
.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
123180
.orgchart .isCollapsedSibling::before,
124181
.orgchart .isCollapsedSibling .hierarchy::before,
125-
.orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
182+
.orgchart .hierarchy.isChildrenCollapsed:not(.couple) > .node:has(+ .nodes)::after,
126183
.orgchart .isCollapsedDescendant::before,
127184
.orgchart .isCollapsedDescendant > .node::before,
128185
.orgchart .isCollapsedDescendant > .node::after,
129186
.orgchart .isAncestorsCollapsed:only-child::before,
130-
.orgchart .isAncestorsCollapsed > .node::before {
187+
.orgchart .isAncestorsCollapsed > .node:not(.outsider)::before {
131188
content: none;
132189
}
133190

134191
/* excluding leaf node */
135-
.orgchart .node:not(:only-child)::after {
192+
.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
136193
content: "";
137194
position: absolute;
138195
bottom: -12px; /* -(background square size + node's border width) */
@@ -155,7 +212,7 @@
155212
background-color: rgba(238, 217, 54, 0.5);
156213
}
157214
/* excluding root node */
158-
.orgchart > ul > li > ul li > .node::before {
215+
.orgchart > ul > li > ul li > .node:not(.outsider)::before {
159216
content: "";
160217
position: absolute;
161218
top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */
@@ -165,7 +222,17 @@
165222
background-color: rgba(217, 83, 79, 0.8);
166223
}
167224

168-
.orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
225+
.orgchart > ul > li > ul li > .node.outsider::before {
226+
content: "";
227+
position: absolute;
228+
top: var(--top, -12px);
229+
left: calc(50% - 1px);
230+
width: 0;
231+
height: var(--height, 10px);
232+
border-right: 2px dotted rgba(217, 83, 79, 0.8);
233+
}
234+
235+
.orgchart > ul > li > ul .isSiblingsCollapsed > .node::before {
169236
top: var(--top-cross-point, -12px);
170237
height: var(--height-cross-point, 10px);
171238
}
@@ -179,6 +246,8 @@
179246
padding: 3px;
180247
border: 2px dashed transparent;
181248
text-align: center;
249+
transition: transform 0.3s, opacity 0.3s;
250+
z-index: 1;
182251
}
183252

184253
.orgchart.l2r .node, .orgchart.r2l .node {
@@ -190,7 +259,7 @@
190259
background-color: rgba(238, 217, 54, 0.5);
191260
transition: .5s;
192261
cursor: default;
193-
z-index: 20;
262+
z-index: 2;
194263
}
195264

196265
.orgchart .node.focused {
@@ -420,10 +489,6 @@
420489
padding: 0.5rem 1rem;
421490
}
422491

423-
.orgchart .node {
424-
transition: transform 0.3s, opacity 0.3s;
425-
}
426-
427492
.orgchart .slide-down {
428493
opacity: 0;
429494
transform: translateY(40px);
@@ -479,8 +544,8 @@
479544
margin-bottom: 0;
480545
}
481546

482-
.orgchart .nodes.vertical .node::before,
483-
.orgchart .nodes.vertical .node::after {
547+
.orgchart .nodes.vertical .hierarchy .node::before,
548+
.orgchart .nodes.vertical .hierarchy .node::after {
484549
content: none;
485550
}
486551

@@ -500,6 +565,10 @@
500565
border-width: 0 0 2px 2px;
501566
}
502567

568+
.orgchart .nodes.vertical .hierarchy:only-child::before {
569+
width: 11px;
570+
}
571+
503572
.orgchart .nodes.vertical .hierarchy::before {
504573
top: 0px;
505574
height: 26px; /* node top half's height(25px) + half width of line */
@@ -627,7 +696,7 @@
627696
margin-bottom: 0;
628697
}
629698

630-
.orgchart .node.compact .node:not(:only-child)::after {
699+
.orgchart .node.compact .node:has(+ .nodes)::after {
631700
content: unset;
632701
}
633702

0 commit comments

Comments
 (0)