Skip to content

Commit b1cf73e

Browse files
dabengdabeng
committed
WIP: implement family tree
1 parent cd43685 commit b1cf73e

File tree

8 files changed

+22
-16
lines changed

8 files changed

+22
-16
lines changed

‎demo/family-tree.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,35 +27,35 @@
2727
'children': [
2828
[
2929
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female' },
30-
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male' }
30+
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male', 'outsider': true }
3131
],
3232
[
3333
{ 'id': '5', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female',
3434
'children': [
3535
[
36-
{ 'id': '7', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female',
36+
{ 'id': '7', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
3737
'children': [
3838
[{ 'id': '8', 'name': 'Dan Dan', 'title': 'UE engineer', 'gender': 'female' }],
3939
[{ 'id': '9', 'name': 'Er Dan', 'title': 'engineer', 'gender': 'female' }],
4040
[{ 'id': '10', 'name': 'San Dan', 'title': 'engineer', 'gender': 'female' }]
4141
]
4242
},
4343
{ 'id': '6', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
44-
{ 'id': '11', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female',
44+
{ 'id': '11', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
4545
'children': [
4646
[{ 'id': '12', 'name': 'Si Dan', 'title': 'UE engineer', 'gender': 'female' }],
4747
[{ 'id': '13', 'name': 'Wu Dan', 'title': 'engineer', 'gender': 'female' }]
4848
]
4949
},
50-
{ 'id': '14', 'name': 'San Pang', 'title': 'engineer', 'gender': 'female',
50+
{ 'id': '14', 'name': 'San Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
5151
'children': [
5252
[{ 'id': '15', 'name': 'Liu Dan', 'title': 'UE engineer', 'gender': 'female' }]
5353
]
5454
}
5555
]
5656
]
5757
},
58-
{ 'id': '16', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male' }
58+
{ 'id': '16', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male', 'outsider': true }
5959
],
6060
[{ 'id': '17', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
6161
[{ 'id': '18', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]

‎dist/css/jquery.orgchart.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
background-color: rgba(238, 217, 54, 0.5);
156156
}
157157
/* excluding root node */
158-
.orgchart > ul > li > ul li > .node::before {
158+
.orgchart > ul > li > ul li > .node:not(.outsider):before {
159159
content: "";
160160
position: absolute;
161161
top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */

‎dist/css/jquery.orgchart.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/jquery.orgchart.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1348,7 +1348,10 @@
13481348
}
13491349
// construct the content of node
13501350
var $nodeDiv = $('<div' + (opts.draggable ? ' draggable="true"' : '') + (data[opts.nodeId] ? ' id="' + data[opts.nodeId] + '"' : '') + (data.parentId ? ' data-parent="' + data.parentId + '"' : '') + '>')
1351-
.addClass('node ' + (data.className || '') + (level > opts.visibleLevel ? ' slide-up' : ''));
1351+
.addClass('node '
1352+
+ (data.className || '')
1353+
+ (data?.outsider ? 'outsider' : '')
1354+
+ (level > opts.visibleLevel ? ' slide-up' : ''));
13521355
if (opts.nodeTemplate) {
13531356
$nodeDiv.append(opts.nodeTemplate(data));
13541357
} else {
@@ -1493,17 +1496,17 @@
14931496
var _this = this;
14941497
$.each(this, function (i) {
14951498
$nodeDiv = that.createNode(this);
1499+
// if there are only two persons in a marriage, two single nodes will appear in a hierarchy
14961500
if (_this.length === 2 && i === 1) {
1497-
// // $hierarchy.children('.node:last').after($nodeDiv);
14981501
$hierarchy.children('.hierarchy:first').append($nodeDiv);
14991502
if (this.children && this.children.length) {
15001503
that.buildInferiorNodes($hierarchy.children('.hierarchy:first'), $nodeDiv, this, level);
15011504
}
15021505
} else {
1506+
// if there are more than two persons in a marriage, every node will be included in a single hierarchy
15031507
var $wrapper = $('<li class="hierarchy"></li>');
15041508
$wrapper.append($nodeDiv);
15051509
$hierarchy.append($wrapper);
1506-
// }
15071510
if (this.children && this.children.length) {
15081511
that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
15091512
}

‎dist/js/jquery.orgchart.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/jquery.orgchart.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/jquery.orgchart.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
background-color: rgba(238, 217, 54, 0.5);
156156
}
157157
/* excluding root node */
158-
.orgchart > ul > li > ul li > .node::before {
158+
.orgchart > ul > li > ul li > .node:not(.outsider):before {
159159
content: "";
160160
position: absolute;
161161
top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */

‎src/js/jquery.orgchart.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1348,7 +1348,10 @@
13481348
}
13491349
// construct the content of node
13501350
var $nodeDiv = $('<div' + (opts.draggable ? ' draggable="true"' : '') + (data[opts.nodeId] ? ' id="' + data[opts.nodeId] + '"' : '') + (data.parentId ? ' data-parent="' + data.parentId + '"' : '') + '>')
1351-
.addClass('node ' + (data.className || '') + (level > opts.visibleLevel ? ' slide-up' : ''));
1351+
.addClass('node '
1352+
+ (data.className || '')
1353+
+ (data?.outsider ? 'outsider' : '')
1354+
+ (level > opts.visibleLevel ? ' slide-up' : ''));
13521355
if (opts.nodeTemplate) {
13531356
$nodeDiv.append(opts.nodeTemplate(data));
13541357
} else {
@@ -1493,17 +1496,17 @@
14931496
var _this = this;
14941497
$.each(this, function (i) {
14951498
$nodeDiv = that.createNode(this);
1499+
// if there are only two persons in a marriage, two single nodes will appear in a hierarchy
14961500
if (_this.length === 2 && i === 1) {
1497-
// // $hierarchy.children('.node:last').after($nodeDiv);
14981501
$hierarchy.children('.hierarchy:first').append($nodeDiv);
14991502
if (this.children && this.children.length) {
15001503
that.buildInferiorNodes($hierarchy.children('.hierarchy:first'), $nodeDiv, this, level);
15011504
}
15021505
} else {
1506+
// if there are more than two persons in a marriage, every node will be included in a single hierarchy
15031507
var $wrapper = $('<li class="hierarchy"></li>');
15041508
$wrapper.append($nodeDiv);
15051509
$hierarchy.append($wrapper);
1506-
// }
15071510
if (this.children && this.children.length) {
15081511
that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
15091512
}

0 commit comments

Comments
 (0)