Skip to content

Commit f48577d

Browse files
dabengdabeng
committed
WIP: implement family tree
1 parent 8be9ea2 commit f48577d

File tree

5 files changed

+135
-79
lines changed

5 files changed

+135
-79
lines changed

‎demo/family-tree.html‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -20,47 +20,49 @@
2020
$(function() {
2121

2222
var datascource = [
23-
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
24-
{
25-
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female',
26-
'children': [
27-
[
28-
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female' },
29-
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male' }
30-
],
31-
[
32-
{ 'id': '5', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female',
33-
'children': [
34-
[
35-
{ 'id': '6', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
36-
{ 'id': '7', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female',
23+
[
24+
{ 'id': '1', 'name': 'Lao Ye', 'title': 'general manager', 'gender': 'male' },
25+
{
26+
'id': '2', 'name': 'Lao Lao', 'title': 'vice general manager', 'gender': 'female',
27+
'children': [
28+
[
29+
{ 'id': '3', 'name': 'Bo Miao', 'title': 'department manager', 'gender': 'female' },
30+
{ 'id': '4', 'name': 'Ren Wu', 'title': 'department manager', 'gender': 'male' }
31+
],
32+
[
33+
{ 'id': '5', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female',
34+
'children': [
35+
[
36+
{ 'id': '6', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
37+
{ 'id': '7', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female',
38+
'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' }]
42+
]
43+
},
44+
{ 'id': '11', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female',
45+
'children': [
46+
[{ 'id': '12', 'name': 'Si Dan', 'title': 'UE engineer', 'gender': 'female' }],
47+
[{ 'id': '13', 'name': 'Wu Dan', 'title': 'engineer', 'gender': 'female' }]
48+
]
49+
},
50+
{ 'id': '14', 'name': 'San Pang', 'title': 'engineer', 'gender': 'female',
3751
'children': [
38-
{ 'id': '8', 'name': 'Dan Dan', 'title': 'UE engineer', 'gender': 'female' },
39-
{ 'id': '9', 'name': 'Er Dan', 'title': 'engineer', 'gender': 'female' },
40-
{ 'id': '10', 'name': 'San Dan', 'title': 'engineer', 'gender': 'female' }
52+
[{ 'id': '15', 'name': 'Liu Dan', 'title': 'UE engineer', 'gender': 'female' }]
4153
]
42-
},
43-
{ 'id': '11', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female',
44-
'children': [
45-
{ 'id': '12', 'name': 'Si Dan', 'title': 'UE engineer', 'gender': 'female' },
46-
{ 'id': '13', 'name': 'Wu Dan', 'title': 'engineer', 'gender': 'female' }
47-
]
48-
},
49-
// { 'id': '14', 'name': 'San Pang', 'title': 'engineer', 'gender': 'female',
50-
// 'children': [
51-
// { 'id': '15', 'name': 'Liu Dan', 'title': 'UE engineer', 'gender': 'female' }
52-
// ]
53-
// }
54+
}
55+
]
5456
]
55-
]
56-
},
57-
{ 'id': '16', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male' }
58-
],
59-
{ 'id': '17', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' },
60-
{ 'id': '18', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }
61-
]
62-
}
63-
];
57+
},
58+
{ 'id': '16', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male' }
59+
],
60+
[{ 'id': '17', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
61+
[{ 'id': '18', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]
62+
]
63+
}
64+
]
65+
];
6466

6567
var oc = $('#chart-container').orgchart({
6668
'data' : datascource,

‎dist/js/jquery.orgchart.js‎

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,16 @@
7575
if (typeof MutationObserver !== 'undefined') {
7676
this.triggerInitEvent();
7777
}
78-
var $root = $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
78+
var $root = Array.isArray(data) ? $chart.append($('<ul class="nodes"></ul>')).find('.nodes')
79+
: $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
7980

8081
if (data instanceof $) { // ul datasource
8182
this.buildHierarchy($root, this.buildJsonDS(data.children()), 0, this.options);
8283
} else { // local json datasource
8384
if (data.relationship) {
8485
this.buildHierarchy($root, data);
8586
} else {
86-
this.buildHierarchy($root, this.attachRel(data, '00'));
87+
this.buildHierarchy($root, Array.isArray(data) ? data : this.attachRel(data, '00'));
8788
}
8889
}
8990

@@ -1443,13 +1444,26 @@
14431444
}
14441445
// recurse through children nodes
14451446
$.each(data.children, function () {
1446-
this.level = level + 1;
1447-
if (data.compact) {
1448-
that.buildHierarchy($nodeDiv, this);
1447+
if (Array.isArray(this)) {
1448+
$.each(this, function() {
1449+
this.level = level + 1;
1450+
if (data.compact) {
1451+
that.buildHierarchy($nodeDiv, this);
1452+
} else {
1453+
var $nodeCell = $('<li class="hierarchy">');
1454+
$nodesLayer.append($nodeCell);
1455+
that.buildHierarchy($nodeCell, this);
1456+
}
1457+
});
14491458
} else {
1450-
var $nodeCell = $('<li class="hierarchy">');
1451-
$nodesLayer.append($nodeCell);
1452-
that.buildHierarchy($nodeCell, this);
1459+
this.level = level + 1;
1460+
if (data.compact) {
1461+
that.buildHierarchy($nodeDiv, this);
1462+
} else {
1463+
var $nodeCell = $('<li class="hierarchy">');
1464+
$nodesLayer.append($nodeCell);
1465+
that.buildHierarchy($nodeCell, this);
1466+
}
14531467
}
14541468
});
14551469
},
@@ -1459,23 +1473,36 @@
14591473
var opts = this.options;
14601474
var level = 0;
14611475
var $nodeDiv;
1462-
if (data.level) {
1476+
if (data.level || data[0]?.level) {
14631477
level = data.level;
14641478
} else {
1465-
level = data.level = $hierarchy.parentsUntil('.orgchart', '.nodes').length;
1479+
level = $hierarchy.parentsUntil('.orgchart', '.nodes').length;
1480+
if (Array.isArray(data)) {
1481+
$.each(data, function () {
1482+
$.each(this, function () {
1483+
this.level = level;
1484+
});
1485+
});
1486+
} else {
1487+
data.level = level;
1488+
}
14661489
}
14671490
// Construct the single node in OrgChart or the multiple nodes in family tree
14681491
if (Array.isArray(data)) {
14691492
$.each(data, function () {
1470-
$nodeDiv = that.createNode(this);
1471-
if ($hierarchy.children('.node').length) {
1472-
$hierarchy.children('.node:last').after($nodeDiv);
1473-
} else {
1474-
$hierarchy.append($nodeDiv);
1475-
}
1476-
if (this.children && this.children.length) {
1477-
that.buildInferiorNodes($hierarchy, $nodeDiv, this, level);
1478-
}
1493+
$.each(this, function () {
1494+
$nodeDiv = that.createNode(this);
1495+
// if ($hierarchy.children('.node').length) {
1496+
// $hierarchy.children('.node:last').after($nodeDiv);
1497+
// } else {
1498+
var $wrapper = $('<li class="hierarchy"></li>');
1499+
$wrapper.append($nodeDiv);
1500+
$hierarchy.append($wrapper);
1501+
// }
1502+
if (this.children && this.children.length) {
1503+
that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
1504+
}
1505+
});
14791506
});
14801507
} else {
14811508
$nodeDiv = this.createNode(data);

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

Lines changed: 2 additions & 2 deletions
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/js/jquery.orgchart.js‎

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,16 @@
7575
if (typeof MutationObserver !== 'undefined') {
7676
this.triggerInitEvent();
7777
}
78-
var $root = $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
78+
var $root = Array.isArray(data) ? $chart.append($('<ul class="nodes"></ul>')).find('.nodes')
79+
: $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
7980

8081
if (data instanceof $) { // ul datasource
8182
this.buildHierarchy($root, this.buildJsonDS(data.children()), 0, this.options);
8283
} else { // local json datasource
8384
if (data.relationship) {
8485
this.buildHierarchy($root, data);
8586
} else {
86-
this.buildHierarchy($root, this.attachRel(data, '00'));
87+
this.buildHierarchy($root, Array.isArray(data) ? data : this.attachRel(data, '00'));
8788
}
8889
}
8990

@@ -1443,13 +1444,26 @@
14431444
}
14441445
// recurse through children nodes
14451446
$.each(data.children, function () {
1446-
this.level = level + 1;
1447-
if (data.compact) {
1448-
that.buildHierarchy($nodeDiv, this);
1447+
if (Array.isArray(this)) {
1448+
$.each(this, function() {
1449+
this.level = level + 1;
1450+
if (data.compact) {
1451+
that.buildHierarchy($nodeDiv, this);
1452+
} else {
1453+
var $nodeCell = $('<li class="hierarchy">');
1454+
$nodesLayer.append($nodeCell);
1455+
that.buildHierarchy($nodeCell, this);
1456+
}
1457+
});
14491458
} else {
1450-
var $nodeCell = $('<li class="hierarchy">');
1451-
$nodesLayer.append($nodeCell);
1452-
that.buildHierarchy($nodeCell, this);
1459+
this.level = level + 1;
1460+
if (data.compact) {
1461+
that.buildHierarchy($nodeDiv, this);
1462+
} else {
1463+
var $nodeCell = $('<li class="hierarchy">');
1464+
$nodesLayer.append($nodeCell);
1465+
that.buildHierarchy($nodeCell, this);
1466+
}
14531467
}
14541468
});
14551469
},
@@ -1459,23 +1473,36 @@
14591473
var opts = this.options;
14601474
var level = 0;
14611475
var $nodeDiv;
1462-
if (data.level) {
1476+
if (data.level || data[0]?.level) {
14631477
level = data.level;
14641478
} else {
1465-
level = data.level = $hierarchy.parentsUntil('.orgchart', '.nodes').length;
1479+
level = $hierarchy.parentsUntil('.orgchart', '.nodes').length;
1480+
if (Array.isArray(data)) {
1481+
$.each(data, function () {
1482+
$.each(this, function () {
1483+
this.level = level;
1484+
});
1485+
});
1486+
} else {
1487+
data.level = level;
1488+
}
14661489
}
14671490
// Construct the single node in OrgChart or the multiple nodes in family tree
14681491
if (Array.isArray(data)) {
14691492
$.each(data, function () {
1470-
$nodeDiv = that.createNode(this);
1471-
if ($hierarchy.children('.node').length) {
1472-
$hierarchy.children('.node:last').after($nodeDiv);
1473-
} else {
1474-
$hierarchy.append($nodeDiv);
1475-
}
1476-
if (this.children && this.children.length) {
1477-
that.buildInferiorNodes($hierarchy, $nodeDiv, this, level);
1478-
}
1493+
$.each(this, function () {
1494+
$nodeDiv = that.createNode(this);
1495+
// if ($hierarchy.children('.node').length) {
1496+
// $hierarchy.children('.node:last').after($nodeDiv);
1497+
// } else {
1498+
var $wrapper = $('<li class="hierarchy"></li>');
1499+
$wrapper.append($nodeDiv);
1500+
$hierarchy.append($wrapper);
1501+
// }
1502+
if (this.children && this.children.length) {
1503+
that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
1504+
}
1505+
});
14791506
});
14801507
} else {
14811508
$nodeDiv = this.createNode(data);

0 commit comments

Comments
 (0)