console
$(function() {
var datasource = {
'name': '总部',
'title': 'xxxx公司',
'children': [
{ 'name': '测试', 'title': '张三' },
{ 'name': '开发', 'title': '赵四',
'children': [
{ 'name': '国外', 'title': 'senior engineer' },
{ 'name': '国内', 'title': 'senior engineer',
'children': [
{ 'name': '培训', 'title': 'senior engineer' }
]
},
{ 'name': '外包', 'title': 'senior engineer' }
]
},
{ 'name': '运维', 'title': '王五' }
]
};
var htmlTemplate = '<div class="node-container">'+
'<div class="node-left fa-th-large fa"></div>'+
'<div class="node-right">'+
'<div class="node-content-top">上</div>'+
'<div class="node-content-bottom">下</div>'+
'</div>'+
'</div>';
$('#org').orgchart({
data: datasource,
nodeTitle:'name',
nodeContent: 'title',
toggleSiblingsResp:true,
visibleLevel:4,
parentNodeSymbol:'fa-align-justify',
nodeTemplate:function(data){
var htmlTemplate = '<div class="node-container">'+
'<div class="node-left fa-th-large fa"></div>'+
'<div class="node-right">'+
'<div class="node-content-top">'+data.name+'</div>'+
'<div class="node-content-bottom">'+data.title+'</div>'+
'</div>'+
'</div>';
return htmlTemplate;
}
});
});
<div id="org"></div>
<div class="node-container">
<div class="node-left fa-th-large fa"></div>
<div class="node-right">
<div class="node-content-top">上</div>
<div class="node-content-bottom">下</div>
</div>
</div>
.node-container{
display: -webkit-flex;
display: flex;
width:200px;
border-radius: 2px;
border:1px solid #47b4f0;
overflow: hidden;
}
.node-left{
width: 60px;
height: 70px;
background-color: #47b4f0;
text-align: center;
line-height: 70px;
color: white;
font-size: 30px;
}
.node-right{
flex-grow:1;
}
.node-content-top,.node-content-bottom{
height: 35px;
line-height: 31px;
padding:2px;
box-sizing: border-box;
color: #47b4f0;
}
.node-content-bottom{
text-align: center
}