Dan*_*ola 13 html tree layout html-table
我正在尝试在HTML表格中显示树结构.它基本上是您引用网站的人员列表,但您可以展开每个人并查看他们推荐的人(仅2或3个级别).我还在展示每个人的一些信息,所以我正在使用一个包含多个列的表格.
我想知道什么是最好的显示方式,以便较低级别的人看起来"缩进",但避免数据内容和标题显示每个数字意味着什么不匹配...
我主要是在寻找偷东西的想法:-)你有没有见过或做过这样的网站？
编辑:感谢您到目前为止的所有答案.
我想我没能正确解释我想要做的事情.这是人员列表,但是此报告存在的原因是每个人附加的数字,而不是列表本身.
对于此"列表"中的每个人,我将向右侧显示数据,需要对齐,例如,在底部有"总计"等.
图片,如果你愿意的话,有Windows资源管理器,左边是树,所以你可以打开和关闭文件夹,但是,在每个文件夹的右边,你有数据,那里有多少文件,有什么样的信息等等,就像你在Windows资源管理器的右侧窗格中找到"文件"一样(在详细信息视图中),只有我在左侧的树上执行此操作.(这不是我正在做的,但这是我能想到的最接近的类比)
这就是为什么我倾向于制作一张桌子而不是一张List.如果这些只是人们的名字,或文件夹树,我完全同意嵌套<ul>的方式去.我在这种情况下的问题是,我需要为每个项目显示的额外数据是整个报告中最重要的部分.
小智 7
我没有答案,但我有一个例子给那些无法想象OP需求的人.
树视图中的Unix QPS(可视化流程管理器)显示了这样的树/表.
Google图片搜索会找到一些示例图片.
就个人而言,我很想知道如何在浏览器中实现这一点.
编辑:添加了示例图片:
alt text http://www.student.nada.kth.se/~f91-men/qps/tree.png
编辑:原油实施
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html>
<head>
<style>
.removed
{
display:none;
}
.expands
{
cursor:pointer; cursor:hand;
}
.child1 td:first-child
{
padding-left: 1em;
}
.child2 td:first-child
{
padding-left: 2em;
}
</style>
<script>
function toggle()
{
for(var i=0; i<arguments.length; i++)
{
with(document.getElementById(arguments[i]))
{
if(className.indexOf('removed') > -1)
{
className = className.replace('removed');
}
else
{
className += ' removed';
}
}
}
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Person</th>
<th>Prop 1</th>
<th>Prop 2</th>
<th>Prop 3</th>
</tr>
</thead>
<tbody>
<tr id="p1" class="expands" onclick="toggle('p2','p3')">
<td>P1</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr id="p2" class="removed child1">
<td>P2</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr id="p3" class="removed child2">
<td>P3</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Totals:</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</tfoot>
</table>
</body>
</html>
对列表使用语义上适当的标记:<ul>.简单地嵌套它们.你可以隐藏部分结构,也可以动态创建.
<ul id='n0>
<li id='n1'>One guy</li>
<li id='n2'>Second guy
<ul id='n2.0'>
<li id='n2.1'>first one of second guy</li>
<li id='n2.2'>last of second</li>
</ul>
</li>
<li id='n3'>Third one</li>
</ul>
等等.项目的命名取决于你,我通常会反映结构(如此处)或数据库ID.