现在的YUI-EXT也好,DOJO也好,等等,已经提供了功能极其强大的基于tree的widget。
但是类似于组织架构图或者说水平展开的树的UI还是比较少。正好前段时间因为工作的原因做了一个,现发布上来,给需要的朋友和有兴趣的朋友参考。
原理说明:无序列表标签本身是含有结构信息的,所以我们要做的只是用css来改变的缺省的垂直布局而已。这个时候,css中float:left发挥了重要作用;另外:我们分别在div和a元素上使用2张不同的背景图片来达创建节点间连接线和掩盖连接线的多余部分。
实际效果图:
主要html代码:
<div id="contain">
<ul i ...
最终效果图:
UI说明:针对table本身进行增强的tree table组件。
tree的数据来源是单元格内a元素的自定义属性:level和type。具体代码如下:
<table id="treeGrid" border="0" cellpadding="0" cellspacing="0">
<THEAD>
<tr><th>Department</th><th>EmployeeID</th><th>position</th></tr>
</THEAD>
<TBODY>
<t ...
- 01:23
- 浏览 (1880)
- 评论 (1)
- 进入论坛
- 发布在 javascript研究小组 圈子
写在前面:这篇文章是于2004年作者大三时修读《软件工程》这门课程时的读书笔记,最近在整理资料时翻阅到,虽文字和思想一样青涩,但是仍希望和大家共勉,若有不足和纰漏之处望大家见谅和指出。
“软件工程“这个概念的提出,是希望能按照传统的工程模式来解决软件开发过程中遇到的诸如开发周期,经费,质量控制等问题。也就是向人们常说的那样“让软件开发像实施工程一样”,再说得明白一点也就是说“是软件开发像运行工厂一样,处于质量控制之下,按照既定计划生产出合格的软件产品”。但是人们却忽略 ...
- 浏览: 5616 次
- 性别:

- 来自: 上海浦东

- 详细资料
搜索本博客
我的相册
OrginizationMap
共 2 张
共 2 张
最近加入圈子
最新评论
-
TreeTable的简单实现 ...
很有興趣... 必須支援空的資料夾才行哦!!! vtsupermok at g ...
-- by vtsuper -
组织架构图(水平方向的树 ...
谢谢大家的宝贵意见,最近项目比较忙,所以没有时间顾及。 有时间我会尽量完善代码, ...
-- by D-tune -
组织架构图(水平方向的树 ...
楼主的思路不错,但是bug确实有很多。 比如节点的对称显示错位问题;节点带有子节 ...
-- by guwei0530 -
组织架构图(水平方向的树 ...
赞一个:) 思路已经很明显了,大家有需要可以借鉴、修改,没不要张嘴要吧
-- by mark.li.guyu -
组织架构图(水平方向的树 ...
感觉真不错,赞一个:)
-- by xyz20003






评论排行榜