使用 HTML 呈现结构化数据

StackOverflow https://stackoverflow.com/questions/987917

题

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

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

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

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

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

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

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

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

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

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

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

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

有帮助吗？

解决方案

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

其他提示

您正在谈论 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;
}

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

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

如果使用CSS，那是通过添加类似类=“ Level1”的内容，即通过class =“ Level6”来显示嵌套级别？

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

li {
  // level one style
}

li li 
{
  // level two style
} 

etc.
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top