使用CSS和JQuery创建组织结构图结构
我正在检查Twitter Bootstrap中的堆栈论坛树，看到你可以通过CSS实现什么真的很有趣。 由于链接中提到的示例是垂直流动，因此可以实现与水平流动相同的操作。 例如 
作为参考，我添加了JS Fiddle链接： http ： //jsfiddle.net/Fh47n/
.tree li { margin: 0px 0; list-style-type: none; position: relative; padding: 20px 5px 0px 5px; } .tree li::before { content:''; position: absolute; top: 0; width: 1px; height: 100%; right: auto; left: -20px; border-left: 1px solid #ccc; bottom: 50px; } .tree li::after { content:''; position: absolute; top: 30px; width: 25px; height: 20px; right: auto; left: -20px; border-top: 1px solid #ccc; } .tree li a { display: inline-block; border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } /*Remove connectors before root*/ .tree > ul > li::before, .tree > ul > li::after { border: 0; } /*Remove connectors after last child*/ .tree li:last-child::before { height: 30px; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before { border-color: #94a0b4; }
我知道谷歌图表https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1但我不想使用这个，因为我的要求是非常具体的，这可能是不可行的。
任何可以提供帮助的大师？
这是我基于OrgChart的解决方案。 希望它对你来说是个好帮手。
$(function() { var oc = $('#chart-container').orgchart({ 'data' : $('#ul-data') }); });