Recently, a company project needs to make an organizational chart, just do it, and also display the avatar picture. I thought of a lot of ways. At first, I wanted to use eCharts, but I was not familiar with eCharts, and many configurations would not be changed. Then I thought of using css+html to write one by hand, but the data is dynamically generated, so I can't do it. Then Baidu found something called TWaver. I don't know if it's a software or a plug-in or something else. I can't find the source code on the Internet, so I have to pay. Even if I paid for it, I didn't know if it would work or not, so I gave up decisively. Then I searched for a plugin on GitHub called jOrgChart (source code download address: https://github.com/wesnolte/jOrgChart). Then I tried the demo, well, I can't see the effect, because FQ is required.
So I went to Baidu and found an article (original: https://www.cnblogs.com/liboxncg/p/6249752.html), referring to this article.
Then start the steps.
Step 1: Import the required files
①jquery.jOrgChart.css
②jquery.min.js
③jquery.jOrgChart.js
<link rel="stylesheet" href='jquery.jOrgChart.css'/>
<script type='text/javascript' src='jquery-1.11.0.js'></script>
<script type='text/javascript' src='jquery.jOrgChart.js'></script>
All three files can be taken from the downloaded source code.
Step 2:
json file
test.json:
{
"data": [{
"id": 1,
"name": "企业主体信用得分",
"pid": null,
"picurl":"head-pic.png",
"childrens": [
{
"id": 2,
"name": "企业素质",
"pid": 1,
"picurl":"head-pic.png",
"childrens": [
{
"id": 5,
"name": "基本信息",
"pid": 2,
"picurl":"head-pic.png",
"childrens": [
{
"id": 10,
"name": "企业主体信息识别",
"pid": 5,
"picurl":"head-pic.png",
"childrens": [
]
},
{
"id": 11,
"name": "企业持续注册时间",
"pid": 5,
"picurl":"head-pic.png",
"childrens": [
]
},
{
"id": 12,
"name": "注册资本",
"pid": 5,
"picurl":"head-pic.png",
"childrens": [
]
}
]
},
{
"id": 6,
"name": "管理认证",
"pid": 2,
"picurl":"head-pic.png",
"childrens": [
{
"id": 13,
"name": "国际性管理认证",
"pid": 6,
"picurl":"head-pic.png",
"childrens": [
]
},
{
"id": 13,
"name": "International Management Certification 222", },]}]}]"childrens": ["picurl":"head-pic.png",
"pid": 6,
{
"id": 3,
"name": "Performance Record",
"pid": 1,
"picurl":"head-pic.png",
"childrens": [
{
"id": 7,
"name": "Tax implementation",
"pid": 3,
"picurl":"head-pic.png",
"childrens": [
{
"id": 14,
"name": "Whether the tax is paid on time",
"pid ": 7,
"picurl":"head-pic.png",
"childrens": [
]
},
{
"id": 15,
"name": "Whether to pay taxes on time 1",
"pid": 8,
"picurl":"head-pic.png",
"childrens": [
]
}
]
},
{
"id": 8,
"name": "网贷情况",
"pid": 3,
"picurl":"head-pic.png",
"childrens": [
{
"id": 15,
"name": "网贷逾期",
"pid": 8,
"picurl":"head-pic.png",
"childrens": [
]
}
]
}
]
}
]
}
]
}
css style section
<style>
a {
text-decoration: none;
color: #000;
font-size: 12px;
}
.jOrgChart .node {
width: 100px;
height: 150px;
line-height: 50px;
border-radius: 4px;
margin: 0 8px;
background-color: #fff;
position: relative;
}
.jOrgChart .node a{
display: block;
position: absolute;
top:100px;
}
.jOrgChart .node .pic{
position: absolute;
width: 100px;
height: 100px;
top: 0;
border-radius:50% ;
background: #006633;
}
</style>
html code part:
<body>
<!--Show Organization Chart-->
<div id='jOrgChart'></div>
<script type='text/javascript'>
$(function(){
//Data return
$.ajax({
url: "test.json",
type: 'GET',
dataType: 'JSON',
data: {action: 'org_select'},
success: function(result){
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(result.data, showlist);
$ ("#jOrgChart").append(showlist);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',//Specify to generate jorgchart in a dom
dragAndDrop : false//Set whether it can be dragged
} );
}
});
});
function showall(menu_list, parent) {
$.each(menu_list, function(index, val) {
if(val.childrens.length > 0){
var li = $("<li></li>");
li.append("<a href='javascript:void(0)'>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
li.append("<a class='pic' href='javascript:void(0)'><img src='"+val.picurl+"'/></a>").append("<ul></ul>").appendTo(parent);
//递归显示
showall(val.childrens, $(li).children().eq(1));
}else{
var lil=$("<li></li>");
lil.append("<a href='javascript:void(0)'>"+val.name+"</a>").appendTo(parent);
lil.append("<a class='pic' href='javascript:void(0)'><img src='"+val.picurl+"'/></a>");
}
});
}
</script>
</body>
The reference text does not have the function of displaying pictures, but the work requirement is to display the avatar. After thinking about it for a long time, I finally thought that it can be configured in the js configuration file. At the beginning, directly append elements like demo in the showall function, and the result fails. Later, the positioning method was used, the son is absolutely the father, just set the position for him. This plug-in is really easy to use. The js code is about two hundred lines. If you are interested, you can study it in depth.
The following is the effect diagram:
