1

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

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

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

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

  • bool completed;
  • DateTime completionDate;
  • Priority priority;

我的问题是，您建议使用 HTML 在一个页面上呈现这些数据的好方法是什么？

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

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

我的问题是，在一个表列中显示所有任务和子任务会丢失有关任务嵌套方式的信息：例如，它不会显示第二行实际上是第一行的子任务。您能建议一种解决该问题的方法吗？我想用可变数量的人字形来装饰物品，比如“>”，以显示每个物品的嵌套程度，例如：

TASK                    COMPLETED

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

然而，一些问题是：

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

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

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

...我也会这样做，但我还想要一个视图，让读者可以扫描属性值列，当属性值在列中对齐而不是与其他文本穿插时，这更容易。

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

4

4 回答 4

3

您想要的 UI 组件称为 TreeTable（或 Tree Table）。在 Javascript/HTML 中有各种实现。这是一个使用 Javascript 的。这是另一个纯 HTML/CSS（但不会折叠/展开）

于 2009-06-12T17:32:43.137 回答
1

您正在谈论嵌套在 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;
}
于 2009-06-12T17:34:39.217 回答
0

UL、OL 和 LI 非常适合此目的。将其构建为JSON会更好。您可以以任何您希望的方式从 JSON 呈现 HTML。

于 2009-06-12T17:31:39.210 回答
0

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

如果使用 CSS，是否会通过添加 class="level1" 到 class="level6" 来显示嵌套级别？

不，您将在 CSS 中使用适当的选择器。

li {
  // level one style
}

li li 
{
  // level two style
} 

etc.
于 2009-06-12T17:34:04.867 回答