web-dev-qa-db-ja.com

グリッドで1対多の関係を表示する最良の方法は?

グリッド/テーブルのデザインに関しては、これがおそらく最も一般的な問題です。ネストされたアイテムを繰り返さないように、1対多の関係を表示する方法。

私が思いついた2つの解決策を見てください。より良い代替案があるかどうか疑問に思っていましたか?

enter image description here

enter image description here

5
user41234

複数の値を持つ列が1つしかない場合(この例ではカテゴリー)、プレーンな2次元配列(フィーチャーテーブル)を使用できます。以下に示すように、基本的にリレーションを他の次元として回転させます。

ただし、カテゴリの数が非常に多い場合、これは適切にスケーリングされない可能性があります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

4
Jawa

タグを使用して関係を表示できます。

これは、データを表示および編集するための最もコンパクトで最も簡単な方法です。

http://ivaynberg.github.io/select2/ を参照してください

4
denisoid

カテゴリをグループ化して、さまざまなプロパティに割り当てることができると思います。たとえば、プロパティ「足の数」は2または4にすることができます。これにより、次のように情報を表示できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

いくつかの利点があります。

  • エントリ/列の数が少ない
  • アイテムは簡単に比較およびグループ化できます。ユーザーが特定のプロパティで行をソート/グループ化できるようにすることができます
  • アイテムが完全に指定されているかどうかを確認する方が簡単です。ワシが属する亜種は何ですか?

ドロップダウンボックスを使用して、セルのエントリを編集できます。

1
Anna Prenzel