1

HTML を使用して構造化データを表示する方法について質問があります。

通常、セクションとサブセクション ( 、 など) を使用したり、ネストされたリスト (アイテムにサブアイテムのリストが含まれるリスト) を使用したりして表示するツリー状のデータがあり<h1>ます<h2>。

このデータの例は、サブタスクとサブサブタスクを含むタスクを含む to-do リストです。

これらの各データには、次のようなプロパティも関連付けられています。

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

私の質問は、HTML を使用して、このデータを 1 ページに表示する良い方法として何を提案しますか?

私の最初のアイデアは、それを表として提示することです：

  • テーブルの列の 1 つに、タスクまたはサブタスクが表示されます
  • 各行の他の列には、そのタスクに関連付けられたプロパティ (「完了」など) の値が表示されます。

これに関する私の問題は、すべてのタスクとサブタスクを 1 つのテーブル列に表示すると、タスクがどのようにネストされているかに関する情報が失われることです。たとえば、2 行目が実際には最初の行のサブタスクであることを示しません。その問題を回避する方法を提案できますか? 「>」のような可変数のシェブロンでアイテムを装飾して、各アイテムがどれだけ深くネストされているかを示すことを考えました。次に例を示します。

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"throughのようなものを追加することでしょうか?class="level6"

2 番目の方法は、縦方向に流れるテキストとして表示することです。たとえば、...

<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で、各レベルが前のレベルよりも 4 分の 3 小さくなります。

このようなもの：

.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

質問には正解も不正解もありません。しかし、私は質問の中でこの質問に答えます。

CSS を使用している場合、class="level1" から class="level6" のようなものを追加してネスト レベルを表示することでしょうか?

いいえ。CSS で適切なセレクターを使用します。

li {
  // level one style
}

li li 
{
  // level two style
} 

etc.
于 2009-06-12T17:34:04.867 に答える
0

UL、OL、LI はこの目的に適しています。JSONとして構造化することはさらに優れています。任意の方法で JSON から HTML をレンダリングできます。

于 2009-06-12T17:31:39.210 に答える