组织架构图（水平方向的树视图）的实现

   现在的YUI-EXT也好，DOJO也好，等等，已经提供了功能极其强大的基于tree的widget。
但是类似于组织架构图或者说水平展开的树的UI还是比较少。正好前段时间因为工作的原因做了一个，现发布上来，给需要的朋友和有兴趣的朋友参考。

原理说明：无序列表标签本身是含有结构信息的，所以我们要做的只是用css来改变的缺省的垂直布局而已。这个时候，css中float:left发挥了重要作用；另外：我们分别在div和a元素上使用2张不同的背景图片来达创建节点间连接线和掩盖连接线的多余部分。

实际效果图：

主要html代码：

<div id="contain">
	<ul id="map" class="solo">
		<li><div class="root section"><a href="#">XXXCompany</a></div>
			<ul>
				<li><div class="first"><a href="#">HR</a></div></li>
				<li><div class="section"><a href="#">Development</a></div>
						<ul>
							<li><div class="first"><a href="#">Department1</a></div></li>
							<li><div class="section"><a href="#">Department2</a></div>
								<ul>
									<li><div class="first"><a href="#">Group1</a></div></li>
									<li><div class="last"><a href="#">Group2</a></div></li>
								</ul>	
							</li>
							<li><div class="section"><a href="#">Department3</a></div></li>
							<li><div class="last"><a href="#">Department4</a></div></li>
						</ul>
				</li>
				<li><div class="last"><a href="#">Administrator</a></div></li>
			</ul>
		</li>
	</ul>
</div>

css代码：

 div#contain {
	width: 1000em;
	background: none;
}
 ul#map {
	float: none;
	margin: 0 auto;
}
 ul {
	clear: left;
	margin: 2em 0 0 0;
	padding: 0;
	background: #fff;
}
 ul ul {
	border-top: 1px solid #000;
	width: auto;
}
 ul.solo {
	border-top: 0;
}
 li {
	float: left;
	list-style: none;
	position: relative;
}
 li li {
	margin: -1px 0 0 0;
}
 div {
	background: url(../images/vLine.gif) 50% repeat-y;
	padding: 2em 5px 0 5px;
	margin: 0 .3em -2em .3em;
}
 div.section {
	padding: 2em 5px 2em 5px;
}
 div.first {
	background: url(../images/first.gif) 50% repeat-y;
	margin-left: 0;
}
 div.last {
	background: url(../images/last.gif) 50% repeat-y;
	margin-right: 0;
}
 div.root {
	padding-top: 0;
}
 a {
	display: block;
	background: #fff;
	border: 1px solid #000;
	padding: .25em .5em .5em .5em;
	color: #222;
	text-decoration: none;
	margin: 0 auto;
	width: 10em;
	line-height: 2em;
	text-align: center;
	font-size: 1.2em;
}
 a:hover {
	background: #eee;
}

 

评论

11 楼 kimmking 2008-05-21  

赞一个
看看s

10 楼 D-tune 2007-11-10  

谢谢大家的宝贵意见，最近项目比较忙，所以没有时间顾及。
有时间我会尽量完善代码，也希望有兴趣的朋友可以把修改后的代码发上来共享：）

9 楼 guwei0530 2007-10-13  

楼主的思路不错，但是bug确实有很多。
比如节点的对称显示错位问题；节点带有子节点之后的显示错位问题；首、尾节点带有字节点显示的问题，呵呵，还需要你好好考虑设计调整过。

8 楼 aliang888 2007-10-08  

不错，借鉴下先。

7 楼 mark.li.guyu 2007-09-27  

赞一个：）
思路已经很明显了，大家有需要可以借鉴、修改，没不要张嘴要吧

6 楼 xyz20003 2007-09-27  

感觉真不错，赞一个：）

5 楼 labchy 2007-09-27  

老大，你这个是静态的，有动态的么，有那种能够自动合理定位的么？

4 楼 songail 2007-09-19  

楼主，当子节点只有一个的时候会显示错位的，能否加个样式

3 楼 D-tune 2007-09-03  

campaign 写道

lz这个在ie下位置就都乱了。

啊，我的IE7和ff上显示很正常的，IE6sp2上似乎也没问题哦，你是否能把layout不对的图贴一张上来。
另外，我把整理的好的文件打包发上来。大家再测试一下。

2 楼 campaign 2007-09-03  

lz这个在ie下位置就都乱了。

1 楼 bigpanda 2007-09-03  

多谢了。

请问能否把first.gif，last.gif，vLine.gif打个包发上来？便于自己测试。