Skip to content

Commit a96e9bf

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

File tree

8 files changed

+132
-61
lines changed

8 files changed

+132
-61
lines changed

‎demo/family-tree.html‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
[
2424
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
2525
{
26-
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female',
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female', 'outsider': true,
2727
'children': [
2828
[
2929
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female' },
@@ -33,15 +33,15 @@
3333
{ 'id': '5', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female',
3434
'children': [
3535
[
36-
// { 'id': '6', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
37-
{ 'id': '7', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
36+
37+
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
3838
'children': [
39-
[{ 'id': '8', 'name': 'Dan Dan', 'title': 'UE engineer', 'gender': 'female' }],
40-
[{ 'id': '9', 'name': 'Er Dan', 'title': 'engineer', 'gender': 'female' }],
41-
[{ 'id': '10', 'name': 'San Dan', 'title': 'engineer', 'gender': 'female' }]
39+
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer', 'gender': 'female' }],
40+
[{ 'id': '8', 'name': 'Er Dan', 'title': 'engineer', 'gender': 'female' }],
41+
[{ 'id': '9', 'name': 'San Dan', 'title': 'engineer', 'gender': 'female' }]
4242
]
4343
},
44-
{ 'id': '6', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
44+
{ 'id': '10', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
4545
{ 'id': '11', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
4646
'children': [
4747
[{ 'id': '12', 'name': 'Si Dan', 'title': 'UE engineer', 'gender': 'female' }],
@@ -55,17 +55,16 @@
5555
}
5656
],
5757
[
58-
{ 'id': '17', 'name': 'Er Hei', 'title': 'senior engineer', 'gender': 'male' },
59-
{ 'id': '16', 'name': 'Er Yuan', 'title': 'engineer', 'gender': 'female', 'outsider': true },
60-
61-
{ 'id': '17', 'name': 'San Yuan', 'title': 'engineer', 'gender': 'female', 'outsider': true },
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 },
6261
]
6362
]
6463
},
65-
{ 'id': '18', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male', 'outsider': true }
64+
{ 'id': '19', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male', 'outsider': true }
6665
],
67-
[{ 'id': '19', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
68-
[{ 'id': '20', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]
66+
[{ 'id': '20', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
67+
[{ 'id': '21', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]
6968
]
7069
}
7170
]

‎dist/css/jquery.orgchart.css‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -99,18 +99,50 @@
9999
border-top: 2px solid rgba(217, 83, 79, 0.8);
100100
box-sizing: border-box;
101101
}
102-
/* 把本姓人首次出现位置的前面的连线去掉 */
102+
/* 把本姓人首次出现位置的前面的连线（从上一层父母节点向下的连线）都去掉 */
103103
.orgchart .hierarchy:has(~ :nth-child(1 of .hierarchy.insider))::before {
104104
content: none;
105105
}
106106

107-
/* 把本姓人末次出现位置的后面的连线去掉 */
107+
/* 设置紧跟在外姓人之后的首个本姓人的连线 */
108+
.orgchart .hierarchy:has(+ :nth-child(1 of .hierarchy.insider)) + .hierarchy::before {
109+
left: calc(50% - 1px);
110+
width: calc(50% + 1px);
111+
}
112+
113+
/* 把本姓人末次出现位置的后面的连线都去掉 */
108114
.orgchart :nth-last-child(-n + 1 of .hierarchy.insider) ~ .hierarchy::before {
109115
content: none;
110116
}
111117

112-
.orgchart .hierarchy.spouse::before {
113-
/* top: 24px; */
118+
/* 设置后面跟着外姓人的末次出现的本姓人的连线 */
119+
.orgchart :nth-last-child(-n + 1 of .hierarchy.insider):has(+ .hierarchy:not(.insider))::before {
120+
left: 0;
121+
width: calc(50% + 1px);
122+
}
123+
124+
/* 在family tree中，一个夫妻组合里，本姓人只有一个，外姓人可能有多个 */
125+
/* 我们通过水平的连线来表示他们存在婚姻关系 */
126+
.orgchart .hierarchy.spouse:not(.couple)::after {
127+
content: "";
128+
position: absolute;
129+
border-top: 2px solid rgba(217, 83, 79, 0.8);
130+
box-sizing: border-box;
131+
z-index: 0;
132+
top: 24px;
133+
width: var(--ft-width);
134+
left: var(--ft-left-offset);
135+
}
136+
/* 一夫一妻情况下的连线 */
137+
.orgchart .hierarchy.couple::after {
138+
content: "";
139+
position: absolute;
140+
border-top: 2px solid rgba(217, 83, 79, 0.8);
141+
box-sizing: border-box;
142+
z-index: 0;
143+
top: 24px;
144+
width: 10px;
145+
left: calc(50% - 5px); /* half of hierarchy - node's padding width - node's border with */
114146
}
115147

116148
.orgchart .hierarchy:first-child::before,
@@ -135,7 +167,7 @@
135167
.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
136168
.orgchart .isCollapsedSibling::before,
137169
.orgchart .isCollapsedSibling .hierarchy::before,
138-
.orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
170+
.orgchart .hierarchy.isChildrenCollapsed:not(.couple) > .node:has(+ .nodes)::after,
139171
.orgchart .isCollapsedDescendant::before,
140172
.orgchart .isCollapsedDescendant > .node::before,
141173
.orgchart .isCollapsedDescendant > .node::after,
@@ -145,7 +177,7 @@
145177
}
146178

147179
/* excluding leaf node */
148-
.orgchart .node:not(:only-child)::after {
180+
.orgchart .hierarchy:not(.couple) .node:has(+ .nodes)::after {
149181
content: "";
150182
position: absolute;
151183
bottom: -12px; /* -(background square size + node's border width) */
@@ -155,16 +187,6 @@
155187
background-color: rgba(217, 83, 79, 0.8);
156188
}
157189

158-
.orgchart .hierarchy.spouse > .node + .node::before {
159-
content: "";
160-
position: absolute;
161-
top: 22px; /* 50% width of node - node's padding */
162-
left: -7px; /* nodes' gap - node's padding */
163-
width: 10px;
164-
height: 2px;
165-
background-color: rgba(217, 83, 79, 0.8);
166-
}
167-
168190
.orgchart ul li .node.allowedDrop {
169191
border-color: rgba(68, 157, 68, 0.9);
170192
}
@@ -202,6 +224,8 @@
202224
padding: 3px;
203225
border: 2px dashed transparent;
204226
text-align: center;
227+
transition: transform 0.3s, opacity 0.3s;
228+
z-index: 1;
205229
}
206230

207231
.orgchart.l2r .node, .orgchart.r2l .node {
@@ -443,10 +467,6 @@
443467
padding: 0.5rem 1rem;
444468
}
445469

446-
.orgchart .node {
447-
transition: transform 0.3s, opacity 0.3s;
448-
}
449-
450470
.orgchart .slide-down {
451471
opacity: 0;
452472
transform: translateY(40px);
@@ -650,7 +670,7 @@
650670
margin-bottom: 0;
651671
}
652672

653-
.orgchart .node.compact .node:not(:only-child)::after {
673+
.orgchart .node.compact .node:has(+ .nodes)::after {
654674
content: unset;
655675
}
656676

0 commit comments

Comments
 (0)