使用CSS和JQuery创建组织结构图结构 [英] Creating organizational chart structure using CSS and JQuery
本文介绍了使用CSS和JQuery创建组织结构图结构的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在检查堆栈论坛 Twitter Bootstrap中的树，非常有趣的是，您可以看到通过CSS可以实现的目标.由于链接中提到的示例是垂直流，因此可以实现与水平流相同的效果. 例如
作为参考，我添加了JS Fiddle链接: http://jsfiddle.net/Fh47n/
<div class="tree">
<ul>
<li> <a href="#">Parent</a>
<ul>
<li> <a href="#">Child</a>
<ul>
<li> <a href="#">Grand Child</a>
</li>
</ul>
</li>
<li> <a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a>
</li>
<li> <a href="#">Grand Child</a>
<ul>
<li> <a href="#">Great Grand Child</a>
</li>
<li> <a href="#">Great Grand Child</a>
</li>
<li> <a href="#">Great Grand Child</a>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<style type="text/css">
.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;
}
</style>
我了解Google图表 https://developers. google.com/chart/interactive/docs/gallery/orgchart?csw=1 ，但我不想使用此选项，因为我的要求非常具体，可能不可行.
有谁可以帮忙?
解决方案
这是我基于 OrgChart 的解决方案
一个>.希望它对您有帮助.
$(function() {
var oc = $('#chart-container').orgchart({
'data' : $('#ul-data')
});
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/dabeng/OrgChart/master/dist/js/jquery.orgchart.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://rawgit.com/dabeng/OrgChart/master/dist/css/jquery.orgchart.min.css" rel="stylesheet"/>
<ul id="ul-data">
<li><a href="#">Parent</a>
<ul>
<li><a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
<li><a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li><a href="#">Grand Child</a>
<ul>
<li><a href="#">Great Grand Child</a></li>
<li><a href="#">Great Grand Child</a></li>
<li><a href="#">Great Grand Child</a></li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="chart-container"></div>
I was checking on stack forum Trees in Twitter Bootstrap, It was really interesting to see what you can achieve through CSS. Since the example mentioned in the link is of vertical flow, Is it possible to acheive same as horizontal flow. For e.g.
For reference I added the JS Fiddle link: http://jsfiddle.net/Fh47n/
<div class="tree">
<ul>
<li> <a href="#">Parent</a>
<ul>
<li> <a href="#">Child</a>
<ul>
<li> <a href="#">Grand Child</a>
</li>
</ul>
</li>
<li> <a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a>
</li>
<li> <a href="#">Grand Child</a>
<ul>
<li> <a href="#">Great Grand Child</a>
</li>
<li> <a href="#">Great Grand Child</a>
</li>
<li> <a href="#">Great Grand Child</a>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<style type="text/css">
.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;
}
</style>
I know about google chart https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1 but I dont want to use this one as my requirement is very specific which may not be feasible.
Any guru who can help?
解决方案
This is my solution based on OrgChart. Hope it's a good helper for you.
$(function() {
var oc = $('#chart-container').orgchart({
'data' : $('#ul-data')
});
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/dabeng/OrgChart/master/dist/js/jquery.orgchart.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://rawgit.com/dabeng/OrgChart/master/dist/css/jquery.orgchart.min.css" rel="stylesheet"/>
<ul id="ul-data">
<li><a href="#">Parent</a>
<ul>
<li><a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
<li><a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li><a href="#">Grand Child</a>
<ul>
<li><a href="#">Great Grand Child</a></li>
<li><a href="#">Great Grand Child</a></li>
<li><a href="#">Great Grand Child</a></li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="chart-container"></div>
这篇关于使用CSS和JQuery创建组织结构图结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
