Eu preciso centralizar corretamente este modelo de árvore binária.
jQuery
ou JavaScript
podem ser usados.
Eu vou precisar gerar o código com PHP
, então precisa ter certa lógica no html
.
Outro detalhe, é que precisa ter um overflow-x
automático, permitindo que a janela se adapte conforme aumenta a árvore.
Estou tentando tornar mais compacto possível para exibir muitos resultados. Criei este código:
$(function () {
$('.node').each(function () {
var vm = $(this);
lftwid = vm.children(".lft").width();
rgtwid = vm.children(".rgt").width();
if (lftwid != rgtwid) {
if (lftwid > rgtwid) {
vm.children(".rgt").width(lftwid);
} else {
vm.children(".lft").width(rgtwid);
}
}
});
});
.container {
overflow-x: auto;
}
.root {
position: absolute !important;
margin:0;
padding:0;
display:block;
text-align:center;
font-size: 10px;
background-color: #ddd;
}
.node {
width: auto;
height:auto;
}
.lft, .rgt {
margin:5px;
margin-top: 10px;
min-width:40px;
min-height:40px;
}
.rgt {
border:1px solid #000;
float:right;
background-color: #ccc;
}
.lft {
border:1px solid #fff;
float:left;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>
<div class='container'>
<div class='row'>
<div class='root node'>
<p><i class="fa fa-user"></i>
</p>
<p>root name</p>
<p>150</p>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>200</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>100</p>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>200</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>50</p>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>50</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>100</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>150</p>
</div>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>50</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>0</p>
</div>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>100</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>50</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>100</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>50</p>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>150</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>200</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>50</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>