Skip to content

Commit

Permalink
add the demo of family tree
Browse files Browse the repository at this point in the history
  • Loading branch information
@dabeng
dabeng committed Dec 15, 2024
1 parent d1f2949 commit 9b55851
Show file tree
Hide file tree
Showing 4 changed files with 283 additions and 61 deletions.
97 changes: 83 additions & 14 deletions css/jquery.orgchart.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
list-style: none;
padding-left: 0;
margin: 0;
justify-content: center;
}

.orgchart .hierarchy {
Expand All @@ -100,6 +101,62 @@
box-sizing: border-box;
}

/* 本姓人与上一层父母的连线，借助伪元素::before实现 */
/* 处理同一层中特殊的首节点 */
.orgchart .couple:first-child:not(:only-child)::before {
width: calc(100% - 69px); /* half width of hierarchy - half width of node - node's padding - node's border width */
left: 69px;
}

/* 处理同一层中特殊的末节点 */
.orgchart .couple:last-child:not(:only-child)::before {
width: calc(50% + 71px);
left: 0px;
}

.orgchart .hierarchy.couple:only-child::before {
width: 142px; /* half of node's width + link's width */
left: calc(50% - 71px); /* half width of node - half of link width */
}

/* 在family tree中，一个夫妻组合里，本姓人只有一个，外姓人可能有多个 */
/* 我们通过水平的连线来表示他们存在婚姻关系，借助伪元素::after实现 */
.orgchart .hierarchy.spouse:not(.couple)::after {
content: "";
position: absolute;
border-top: 2px solid rgba(217, 83, 79, 0.8);
box-sizing: border-box;
z-index: 0;
top: 24px;
width: var(--ft-width);
left: var(--ft-left-offset);
}

/* 一夫一妻情况下的连线 */
.orgchart .couple {
white-space: nowrap;
}

.orgchart .couple:has(> .nodes) > .node:first-child::after {
content: "";
position: absolute;
top: 24px;
left: calc(100% + 1px);
width: 2px;
height: 33px;
background-color: rgba(217, 83, 79, 0.8);
}
.orgchart .couple::after {
content: "";
position: absolute;
border-top: 2px solid rgba(217, 83, 79, 0.8);
box-sizing: border-box;
z-index: 0;
top: 24px;
width: 20px;
left: calc(50% - 10px); /* half of hierarchy - node's padding width - node's border with */
}

.orgchart .hierarchy:first-child::before,
.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
left: calc(50% - 1px);
Expand All @@ -111,7 +168,7 @@
width: calc(50% + 1px);
}

.orgchart .hierarchy:not(.hidden):only-child::before {
.orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before {
width: 2px;
}

Expand All @@ -122,17 +179,17 @@
.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
.orgchart .isCollapsedSibling::before,
.orgchart .isCollapsedSibling .hierarchy::before,
.orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
.orgchart .hierarchy.isChildrenCollapsed:not(.couple) > .node:has(+ .nodes)::after,
.orgchart .isCollapsedDescendant::before,
.orgchart .isCollapsedDescendant > .node::before,
.orgchart .isCollapsedDescendant > .node::after,
.orgchart .isAncestorsCollapsed:only-child::before,
.orgchart .isAncestorsCollapsed > .node::before {
.orgchart .isAncestorsCollapsed > .node:not(.outsider)::before {
content: none;
}

/* excluding leaf node */
.orgchart .node:not(:only-child)::after {
.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
content: "";
position: absolute;
bottom: -12px; /* -(background square size + node's border width) */
Expand All @@ -155,7 +212,7 @@
background-color: rgba(238, 217, 54, 0.5);
}
/* excluding root node */
.orgchart > ul > li > ul li > .node::before {
.orgchart > ul > li > ul li > .node:not(.outsider)::before {
content: "";
position: absolute;
top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */
Expand All @@ -165,7 +222,17 @@
background-color: rgba(217, 83, 79, 0.8);
}

.orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
.orgchart > ul > li > ul li > .node.outsider::before {
content: "";
position: absolute;
top: var(--top, -12px);
left: calc(50% - 1px);
width: 0;
height: var(--height, 10px);
border-right: 2px dotted rgba(217, 83, 79, 0.8);
}

.orgchart > ul > li > ul .isSiblingsCollapsed > .node::before {
top: var(--top-cross-point, -12px);
height: var(--height-cross-point, 10px);
}
Expand All @@ -179,6 +246,8 @@
padding: 3px;
border: 2px dashed transparent;
text-align: center;
transition: transform 0.3s, opacity 0.3s;
z-index: 1;
}

.orgchart.l2r .node, .orgchart.r2l .node {
Expand All @@ -190,7 +259,7 @@
background-color: rgba(238, 217, 54, 0.5);
transition: .5s;
cursor: default;
z-index: 20;
z-index: 2;
}

.orgchart .node.focused {
Expand Down Expand Up @@ -420,10 +489,6 @@
padding: 0.5rem 1rem;
}

.orgchart .node {
transition: transform 0.3s, opacity 0.3s;
}

.orgchart .slide-down {
opacity: 0;
transform: translateY(40px);
Expand Down Expand Up @@ -479,8 +544,8 @@
margin-bottom: 0;
}

.orgchart .nodes.vertical .node::before,
.orgchart .nodes.vertical .node::after {
.orgchart .nodes.vertical .hierarchy .node::before,
.orgchart .nodes.vertical .hierarchy .node::after {
content: none;
}

Expand All @@ -500,6 +565,10 @@
border-width: 0 0 2px 2px;
}

.orgchart .nodes.vertical .hierarchy:only-child::before {
width: 11px;
}

.orgchart .nodes.vertical .hierarchy::before {
top: 0px;
height: 26px; /* node top half's height(25px) + half width of line */
Expand Down Expand Up @@ -627,7 +696,7 @@
margin-bottom: 0;
}

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

Expand Down
97 changes: 97 additions & 0 deletions family-tree.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Organization Chart Plugin</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/jquery.orgchart.css">
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
.orgchart { background: #fff; }
#chart-container {
height: 850px;
}
.orgchart .node {
padding: 3px 8px;
}
.orgchart .node .avatar {
border-radius: 60px;
box-shadow: rgba(99, 99, 99, 0.8) 0px 2px 8px 0px;
}
.orgchart .couple:has(> .nodes) > .node:first-child::after {
top: 148px;
}
.orgchart .couple::after {
top: 148px;
width: 30px;
left: calc(50% - 15px);
}
.orgchart .couple:first-child:not(:only-child)::before {
width: calc(100% - 74px);
left: 74px;
}
.orgchart .hierarchy.couple:only-child::before {
width: 152px;
left: calc(50% - 76px);
}
.orgchart .couple:last-child:not(:only-child)::before {
width: calc(50% + 76px);
}
</style>
</head>
<body>
<div id="chart-container"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
<script type="text/javascript">
$(function() {

var datascource = [
[
{ 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
{
'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
'children': [
[
{ 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
],
[
{ 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
'children': [
[

{ 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
'children': [
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
[{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
]
},
{ 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
]
]
},
{ 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
],
[
{ 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
]
]
}
]
];

var oc = $('#chart-container').orgchart({
'data' : datascource,
'nodeContent': 'title',
'nodeID': 'id',
'createNode': function($node, data) {
$node.prepend(`<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
}
});


});
</script>
</body>
</html>
7 changes: 4 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
background-color: #000;
}
section {
width: 30rem;
width: 36rem;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -124,7 +124,7 @@
<li><a href="edit-chart.html" target="_blank">edit chart</a></li>
<li><a href="edit-hybrid-chart.html" target="_blank">edit hybrid chart</a></li>
<li><a href="export-chart.html" target="_blank">export chart as a picture</a></li>
<li><a href="export-chart-with-pictures.html" target="_blank">export the chart with nodes containing pictures</a></li>
<li><a href="export-chart-with-pictures.html" target="_blank">export chart with pictures</a></li>
<li><a href="export-chart-pdf.html" target="_blank">export chart as a PDF</a></li>
<li><a href="filter-node.html" target="_blank">filter node</a></li>
<li><a href="get-hierarchy.html" target="_blank">getHierarchy() method</a></li>
Expand All @@ -143,10 +143,11 @@
<li><a href="get-related-nodes.html" target="_blank">Highlight related nodes</a></li>
<li><a href="level-offset.html" target="_blank">position node in specific level</a></li>
<li><a href="nodes-of-different-widths.html" target="_blank">nodes of different widths</a></li>
<li><a href="drag-drop-hybrid-chart.html" target="_blank">drag&drop in the hybrid chart</a></li>
<li><a href="drag-drop-hybrid-chart.html" target="_blank">drag&drop in hybrid chart</a></li>
<li><a href="data-prop-hybrid.html" target="_blank">create hybrid chart with data prop "hybrid"</a></li>
<li><a href="custom-icons.html" target="_blank">use fontawesome icons instead of built-in icons</a></li>
<li><a href="data-prop-compact.html" target="_blank">layout for children which is too many</a></li>
<li><a href="family-tree.html" target="_blank">visualize genealogy/pedigree/family tree information</a></li>
</ol>
</section>
</body>
Expand Down
Loading

0 comments on commit 9b55851

Please sign in to comment.