Skip to content

Commit b3c6301

Browse files
dabengdabeng
committed
add family tree with custom properties
1 parent 6b597d4 commit b3c6301

File tree

3 files changed

+109
-0
lines changed

3 files changed

+109
-0
lines changed

‎README.zh-cn.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ $ npm install orgchart
4242
```
4343
`require('orgchart')`会把orgchart插件追加到jQuery对象上。orgchart模块本身并不导出任何东西。
4444

45+
可参考这个例子, [在React中使用jQuery Orchart](https://stackblitz.com/edit/vitejs-vite-hqv4nbdt)
46+
4547
## [gihtub pages实例集合](https://dabeng.github.io/OrgChart/)
4648
## [基于嵌套ul的实例集合](https://codepen.io/collection/nWqvzY)
4749
## [基于嵌套table的实例集合](https://codepen.io/collection/AWxGVb/) (过时)

‎README.zh-tw.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ $ npm install orgchart
4242
```
4343
`require('orgchart')`會把orgchart插件追加到jQuery對象上。orgchart模塊本身並不導出任何東西。
4444

45+
可參考這個例子, [在React中使用jQuery Orchart](https://stackblitz.com/edit/vitejs-vite-hqv4nbdt)
46+
4547
## [gihtub pages實例集合](https://dabeng.github.io/OrgChart/)
4648
## [基于嵌套ul的實例集合](https://codepen.io/collection/nWqvzY)
4749
## [基于嵌套table的實例集合](https://codepen.io/collection/AWxGVb/) (過時)

‎demo/familytree-custom-properties.html

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Organization Chart Plugin</title>
7+
<link rel="icon" href="img/logo.png">
8+
<link rel="stylesheet" href="css/fontawesome.min.css">
9+
<link rel="stylesheet" href="css/jquery.orgchart.css">
10+
<link rel="stylesheet" href="css/style.css">
11+
<style type="text/css">
12+
.orgchart {
13+
background: #fff;
14+
}
15+
16+
.orgchart .node.female>.title {
17+
border-top-left-radius: 20px;
18+
}
19+
20+
.orgchart .node.female>.content {
21+
border-bottom-right-radius: 20px;
22+
}
23+
24+
.orgchart .property-tag {
25+
float: left;
26+
font-size: medium;
27+
color: rgb(217, 83, 79);
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<div id="chart-container"></div>
34+
35+
<script type="text/javascript" src="js/jquery.min.js"></script>
36+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
37+
<script type="text/javascript">
38+
$(function () {
39+
40+
var datascource = [
41+
[
42+
{ 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
43+
{
44+
'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
45+
'children': [
46+
[
47+
{ 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female' }
48+
],
49+
[
50+
{
51+
'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
52+
'children': [
53+
[
54+
{
55+
'id': '11', 'name': 'Pang Pang', 'title': 'EX-Wife', 'gender': 'female', 'outsider': true, "ex": true,
56+
'children': [
57+
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
58+
[{ 'id': '6', 'name': '2 Dan', 'title': 'Daughter', 'gender': 'female', "adpoted": true }],
59+
]
60+
},
61+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
62+
{
63+
'id': '12', 'name': '2 Pang', 'title': 'Current Wife', 'gender': 'female', 'outsider': true, 'children': [
64+
[{ 'id': '14', 'name': '3 Dan', 'title': 'Daughter', 'gender': 'female' }]
65+
]
66+
}
67+
],
68+
[
69+
{ 'id': '13', 'name': '2 Hei', 'title': 'Brother', 'gender': 'male' }
70+
]
71+
]
72+
},
73+
{ 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
74+
],
75+
[
76+
{ 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female' }
77+
]
78+
]
79+
}
80+
]
81+
];
82+
83+
var oc = $('#chart-container').orgchart({
84+
'data': datascource,
85+
'nodeContent': 'title',
86+
'nodeID': 'id',
87+
'createNode': function ($node, data) {
88+
if (data.gender === 'female') {
89+
$node.addClass('female');
90+
}
91+
if (data.adpoted) {
92+
$node.children('.content').prepend(`<i class="property-tag fa-solid fa-person-breastfeeding"></i>`);
93+
}
94+
if (data.ex) {
95+
$node.children('.content').prepend(`<i class="property-tag fa-solid fa-heart-crack"></i>`);
96+
}
97+
}
98+
});
99+
100+
101+
});
102+
</script>
103+
</body>
104+
105+
</html>

0 commit comments

Comments
 (0)