Question

我有一个关于如何使用HTML呈现一些结构化数据的问题。

我有一些树状数据，您通常可以使用部分和子部分（即<h1>，<h2>等）和/或使用嵌套列表（即其项目包含列表的列表）分项目。）。

此数据的一个示例是待办事项列表，其中包含包含子任务和子子任务的任务。

这些数据中的每一个都具有关联的属性，例如：

bool completed;
DateTime completionDate;
Priority priority;

我的问题是，您建议使用HTML在一个页面上显示此数据的好方法是什么？

我的第一个想法是将其作为表格出现：

表格的一列显示了任务或子任务
每行中的其他列显示与该任务相关联的属性值（例如“已完成”等）

我的问题是，在一个表列中显示所有任务和子任务会丢失有关如何嵌套任务的信息：例如，它不会显示第二行实际上是第一行的子任务。你能建议一种解决这个问题的方法吗？我想过装饰一些可变数量的V形项目，比如'＆gt;'显示每个项目的嵌套程度，例如：

TASK                    COMPLETED

Some major task            No
> A subtask                Yes
> Another subtask          Yes
> > A sub-subtask          Yes
Next major task            No

然而，有些问题是：

它可能看起来很难看，而且我不确定它是否可以直观地理解和可读。其他一些装饰品，或者只是变长的空白缩进，可能会更好吗？
我没有看到使用HTML + CSS编码它的优雅方式;例如，您是使用HTML插入装饰，还是使用CSS插入;如果使用CSS，是否可以通过添加class="level1"到class="level6"之类的内容来显示嵌套级别？

第二种方式是将其呈现为垂直流动的文本，例如......

<h1>Some major task</h1>
<p>Completed: no.</p>
<h2>A subtask</h2>
...etc...

...我也会这样做，但我也想要一个让读者扫描属性值列的视图，当属性值在列中对齐而不是散布在其他文本中时，这更容易。< / p>

这更多是关于UI设计而不是编码，但是......我肯定不是第一个想要显示这种数据的人，但我不记得曾见过任何例子，所以我想问你。

Answer 1

您想要的UI组件称为TreeTable（或树表）。 Javascript / HTML中有various implementations个。这是使用Javascript的one。这里的another one是纯HTML / CSS（但不会折叠/展开）

Answer 2

您正在谈论嵌套在HTML的层次结构中。就其本质而言，你根本不需要做任何特别的工作。

只需要一个简单的递归列表，无需任何深度或任何特殊考虑因素。如果您不需要额外的工作，您甚至可以将扩展折叠功能添加到任何级别。

<ul>
  <li>
    <div class="task-group">
      <span class="task-title">Task 1</span>
      <span class="task-status">Complete</span>
      <ul>
        <li>
          <div class="task-group">
            <span class="task-title">Task 1a</span>
            <span class="task-status">Complete</span>
          </div>
        <li>
          <div class="task-group">
            <span class="task-title">Task 1b</span>
            <span class="task-status">Incomplete</span>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

然后，您只需将每个任务组设置为与其父级具有相对边距，以便嵌套变为递归。为具有li样式的任务设置花哨（或没有）项目符号，并自定义task-status类的位置，使其按照您希望的方式布局。

通过在CSS中设置相对文本大小，您还可以获得较低的子任务，以递归方式继承较小的文本大小。像.75em这样的东西，所以每个级别比前一级别小四分之三。

这样的事情：

.task-group {
   font-size: .75em;
   margin-left: 1em;
}
.task-title {
   text-decoration: underline;
   float: left;
}
.task-status {
   float: right;
}

Answer 3

UL，OL和LI对此有益。将其结构为JSON甚至更好。您可以以任何方式从JSON呈现HTML。

Answer 4

这个问题没有正确或错误的答案。但我会在一个问题中回答这个问题。

如果使用CSS，那就是添加像class =“level1”到的东西 class =“level6”来显示嵌套水平？

没有。您可以在CSS中使用适当的选择器。

li {
  // level one style
}

li li 
{
  // level two style
} 

etc.

使用HTML呈现结构化数据

4 个答案: