嗨,我在orgchart
中遇到了麻烦,那里的箱子重叠了。
我正在使用此插件:https://github.com/dabeng/OrgChart
问题:为什么2个boxes
在没有margin
的情况下重叠,我如何动态更改boxes
的大小。
这是完整的 codepen 视图:https://codepen.io/anon/pen/axJjwv
注意:请查看CODEPEN以进行全视图(https://codepen.io/anon/pen/axJjwv)
(function($) {
$(function() {
var ds = {
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'name': 'Bo Miao', 'title': 'department manager', 'className': 'middle-level',
'children': [
{ 'name': 'Li Jing', 'title': 'senior engineer', 'className': 'product-dept' },
{ 'name': 'Li Xin', 'title': 'senior engineer', 'className': 'product-dept',
'children': [
{ 'name': 'To To', 'title': 'engineer', 'className': 'pipeline1' },
{ 'name': 'Fei Fei', 'title': 'engineer', 'className': 'pipeline1' },
{ 'name': 'Xuan Xuan', 'title': 'engineer', 'className': 'pipeline1' }
]
}
]
},
{ 'name': 'Su Miao', 'title': 'department manager', 'className': 'middle-level',
'children': [
{ 'name': 'Pang Pang', 'title': 'senior engineer', 'className': 'rd-dept' },
{ 'name': 'Hei Hei', 'title': 'senior engineer', 'className': 'rd-dept',
'children': [
{ 'name': 'Ej 1', 'className': 'frontend1' },
{ 'name': 'Ej 2', 'className': 'frontend1' },
{ 'name':'Ej war', 'className': 'frontend1' }
]
}
]
}
]
};
var getId = function() {
return (new Date().getTime()) * 1000 + Math.floor(Math.random() * 1001);
};
var oc = $('#chart-container').orgchart({
'data' : ds,
'direction': 'l2r',
'width' : '200px',
createNode : function($node,data){
console.log('node ',$node,data);
}
// 'nodeTitle' : 'false'
});
});
})(jQuery);
.orgchart{background: #333 !important;}
.orgchart { background: #fff; }
.orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; }
.orgchart .lines .downLine {
border-bottom: 1px solid #ccc;
background: #ccc;
}
.orgchart .lines .leftLine {
border-left:1px solid #ccc;
}
.orgchart .lines .topLine {
border-top:1px solid #ccc;
}
.orgchart .lines .rightLine {
border-right:1px solid #ccc;
}
.orgchart td>.down { background-color: #aaa; }
.orgchart .middle-level .title { background-color: #006699; }
.orgchart .middle-level .content { border-color: #006699; }
.orgchart .product-dept .title { background-color: #009933; }
.orgchart .product-dept .content { border-color: #009933; }
.orgchart .rd-dept .title { background-color: #993366; }
.orgchart .rd-dept .content { border-color: #993366; }
.orgchart .pipeline1 .title { background-color: #996633; }
.orgchart .pipeline1 .content { border-color: #996633; }
.orgchart .frontend1 .title { background-color: #cc0066; }
.orgchart .frontend1 .content { border-color: #cc0066; }
#chart-container {
font-family: Arial;
height: 420px;
/* border: 2px dashed #aaa; */
border-radius: 5px;
overflow: auto;
text-align: center;
display:flex;
justify-content: flex-start;
}
.orgchart.edit-state .edge { display: none; }
.orgchart .node .title {
height: 40px;
line-height: 40px;
margin-left: 21px;
margin-top: -15px;
}
.orgchart .node .title { height: 40px; line-height: 40px; }
.orgchart .node .title .symbol { margin-top: 1px; }
.orgchart .node .title {
height: 40px;
line-height: 40px;
margin-left: 31px;
margin-top: -50px;
}
.orgchart .node .title {
height: 74px;
line-height: 83px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/js/jquery.orgchart.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/css/jquery.orgchart.min.css" rel="stylesheet"/>
<div id="chart-container" style="text-align: right;"></div>