Question

我正在尝试在HTML表格中显示树状结构。它基本上是您引用网站的人员列表，但您可以展开每个人并查看他们推荐的人（仅2或3个级别）。我也在展示每个人的一些信息，所以我正在使用一个包含多个列的表格。

我想知道最好的显示方法是什么，以便较低级别的人看起来“缩进”，但避免数据内容与显示每个数字意味着什么的标题不匹配...

我主要是在寻找偷窃的想法:-)你见过或做过这样的网站吗？

编辑：到目前为止，感谢您提供所有答案。

我想我没能正确解释我想要做的事情。这是一个人员列表，但是这个报告存在的原因是每个人的数字，而不是列表本身对于此“列表”中的每个人，我将向右侧显示数据，需要对齐，例如，在底部有“总计”等。

图片，如果你愿意的话，拥有Windows资源管理器，左边是树，这样你就可以打开和关闭文件夹了，但是，在每个文件夹的右边，你有数据，比如那里有多少个文件，什么就像你在Windows资源管理器的右侧窗格中获取“文件”（在详细信息视图中）一样，只有我在左侧的树上执行此操作。（这不是我正在做的，但这是我能想到的最接近的类比）

这就是为什么我倾向于制作一张桌子而不是一张List。如果这些只是人们的名字或文件夹树，我完全同意嵌套＆lt; ul＆gt;的是要走的路。我在这种情况下的问题是，我需要为每个项目显示的额外数据是整个报告中最重要的部分。

Answer 1

我没有答案，但我有一个例子，说明那些无法看到OP需求的人。

树视图中的Unix QPS（可视化进程管理器）只显示了这样一个树/表。

Google图片搜索会找到一些示例图片。

就个人而言，我很想知道如何在浏览器中实现这一点。

编辑：添加了示例图片：

_{（来源：nada.kth.se）}

编辑：原油实施

<!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>

Answer 2

对列表使用语义上合适的标记：<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。

Answer 3

这种布局的名称是：

tree grid / treegrid（例如：Ajax）
树列表视图/ treelistview（例如：Microsoft .Net）
树模型/ treemodel（例如：Qt框架）

对“treegrid”和“tree grid html5”的搜索似乎为html实现提供了最佳结果。

Answer 4

......这基本上是一个人的名单......

你没有 - 这不是表格数据，而是一个列表（<ul>）

Answer 5

我们正在使用一堆DIV来显示类似的结构。奇数（第1位，第3位，第5位等）每个都有一个单行表，偶数（第2，第4等）最初是CSS'ed'display：none'。每个表的第一个单元格包含一个链接，该链接触发其下面的DIV，以填充通过AJAX调用从服务器返回的数据。返回的数据可能与第一级内容（一些“可扩展”行）具有相同的结构，或者只是关于相关记录的“详细信息”。没有任何关于它的语义，但它看起来像客户想要它的方式，它的工作原理。以下是截图：

扩展前的初始列表： alt text http://img26.imageshack.us/img26/5986/28656041.png

点击最后一个链接（70036720）后： alt text http://img15.imageshack.us/img15/7455/40596280.png

点击第二级链接（70036720-1）后： alt text http://img197.imageshack.us/img197/4588/37964248.png

Answer 6

我会尝试使用嵌套的div。我认为将它看起来像一个只有顶部列标题的大表是非常困难的，所以你可能最好考虑为每个嵌套级别考虑一个新表，或者将它转动为圆形以便将数据显示为行而不是列。

Answer 7

当然，我认为表格是错误的工具。通常，树被定义为子树列表（加上可能的一些数据），因此，我认为对html的语义转换应该使用一些嵌套列表（如果你想要那里的动态性，请确保你保留所有列表使用javascript打开并关闭它们，因此如果用户禁用了javascript，它们就会打开。

事实上，您还说，您有一个 LIST 访问该网站的人，所以它看起来更像是列表而不是表格。

此外，嵌套列表可以使用CSS轻松格式化，看起来非常好。至少让这样一个嵌套列表看起来不错的努力远远不如试图使表看起来那么好（我已经尝试过两者）。

总体而言：使用嵌套列表。它更符合您所代表的数据结构，并且更适合您的直觉，并且可以更简单地更好地进行格式化。

Answer 8

所以你有人和一群人的名单。将其安排为嵌套列表。

然后您有关于每个人的表格信息。将此作为一系列表格来呈现。

接下来，将人们链接到表格。这可以通过<a href="#table_about_person_a">和<table id="table_about_person_a">

完成

如果启用了JavaScript，请加载样式表以设置要显示的所有表：none;

将事件处理程序附加到列表中读取href的每个链接，以获取与该用户关联的表的id。设置JS以使表显示：table（或IE中的块<= 7）。

由于Internet Explorer存在问题，最好通过为所有表分配一个类来隐藏它们，然后将其删除以显示它们。

然后添加CSS以定位列表旁边的表格。

如果没有JS，它应该干净地降级，以便点击一个名称会将浏览器滚动到与之关联的表格。

Answer 9

Daniel，要获得类似Windows资源管理器中的文件夹层次结构的树结构，您需要有表格，div，图像（以便能够展开折叠）等。您的div应该具有自动生成或增量ID。当用户单击展开/折叠图标时，您的div可见性应设置为阻止或无。这应该在javascript中完成。

我做了类似的事情，我的数据是xml格式，包含分区，分区内的项目，项目中的资源等。我已经应用了xslt来生成树结构的reqd html输出。如果您的要求是相同的，请告诉我。所以我可以发布样本xml，xslt。

Answer 10

只需将树数据结构转换为具有child和parents关系的一维数组，然后使用此1-D数组在表中显示数据。

Answer 11

每当您从树上构建表格时，请使用<table>，<tr>，<td>标记或其等效的CSS table，table-row和{ {1}}并将table-cell应用于与表一起插入的元素，以保留树结构而不破坏表布局。

有关工作示例，请参见this fiddle。

如何在HTML表格中显示树？

11 个答案: