使用jOrgChart實現帶有頭像的組織架構圖
最近公司項目裏需要做一個組織架構圖，做就做吧，還要在顯示頭像圖片。想了很多辦法，最開始是想用eCharts的，但是對eCharts不熟悉，很多配置不會改；然後想著用css+html純手寫一個吧，可是數據是動態生成的，不會做。然後百度找到一個叫TWaver的東西，不知道是軟件還是插件還是其他的什麽東西，網上搜不到源碼，是要付費的。就算付費買了，也不知道好不好用，所以果斷放棄。然後上GitHub上搜了一個插件，叫jOrgChart(源碼下載地址：https://github.com/wesnolte/jOrgChart)。然後試了下demo，好吧，看不到效果，因為需要FQ。
於是又百度，找到了一篇文章（原文：https://www.cnblogs.com/liboxncg/p/6249752.html），參考了這篇文章。
然後開始步驟吧。
第一步：引入需要的文件
①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>
這三個文件都可以從下載的源碼裏面拿出來。
第二步：
json文件
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": "國際性管理認證222",
"pid": 6,
"picurl":"head-pic.png",
"childrens": [
]
}
]
}
]
},
{
"id": 3,
"name": "履約記錄",
"pid": 1,
"picurl":"head-pic.png",
"childrens": [
{
"id": 7,
"name": "稅務執行情況",
"pid": 3,
"picurl":"head-pic.png",
"childrens": [
{
"id": 14,
"name": "是否按時繳納稅款",
"pid": 7,
"picurl":"head-pic.png",
"childrens": [
]
},
{
"id": 15,
"name": "是否按時繳納稅款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>
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代碼部分：
<body>
<!--顯示組織架構圖-->
<div id=‘jOrgChart‘></div>
<script type=‘text/javascript‘>
$(function(){
//數據返回
$.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‘,//指定在某個dom生成jorgchart
dragAndDrop : false//設置是否可拖動
});
}
});
});
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>
參考的原文是沒有顯示圖片這個功能的，但是工作要求是要顯示頭像，琢磨了半天，終於想到，在js配置文件裏面配置就可以了，這點遵循了插件使用的原則，修修改改。剛開始，直接在showall這個函數裏面直接像demo一樣append元素，結果失敗。後面使用了定位的方法，子絕父相，給他把位置定好了就好啦。這個插件是真的好用，js代碼就兩百來行，感興趣的可以深入研究。
下面是效果圖：
使用jOrgChart實現帶有頭像的組織架構圖