web-dev-qa-db-ja.com

テーブルに複数レベルの階層を表示する

建設請負業者向けの給与計算アプリを開発しています。 1つの請負業者(この場合は「Vandelay Industries」)のテーブルで階層を表示しようとしています。ユーザーがVandelayが階層のどこにあるか(つまり、彼らは下請け業者です)、それらの上にいる人を確認できるようにしたい階層内で、同じレベルにあり、誰が下にあるかを示します。4または5レベルの階層を表示したいのですが、私がスケッチしたソリューションは不格好だと感じています enter image description here 上記の例では、階層列の見出しにテキストが多すぎます。 2番目の解決策は、各エントリの後に文字通り階層レベルを書き込む方法ですが、優れているように見えますが、それでも優れていません。 enter image description here

助言がありますか?

9
duralexglass

別のオプションは Miller columns を使用することです。これは本質的にツリービューが反転され、行で構造化されます。

enter image description here

これはファイルオーガナイザーではかなり一般的なアプローチですが、階層のレベルが多すぎる場合は少し注意が必要な場合があります。

また、組織内の階層を表すために一般的に使用される組織図またはグラフを確認することもできます。

enter image description here

6
Michael Lai

ここでの問題は、テーブルを使用するべきではなく、別のものを使用することです。最初の簡単な選択は Tree View です。 ツリービューは、階層データをわかりやすい方法で整理できるシステムであり、ほとんどのユーザー(そうでない場合) all)の使い方とその affordances の使い方を知っている。

enter image description here

実装側とユーザーエクスペリエンスから、階層をフィルターすることもできます。これにより、ユーザーは階層内の要素の位置を簡単に視覚化できます。 。たとえば、すべての階層を表示してから、contractorレベル、またはsub-contractorまたはどんな選択でも

5
Devin

私の解決策に突き出る唯一の問題は、請負業者間の絶対的な階層を伝達することであり、実際に伝達したい相対的な階層ではないことです。次の調整を行うことをお勧めします。

  1. Vandelayと他の各請負業者との関係のみに関心があるので、Vandelayの階層の上下にあるすべての階層の階層をフラット化します。これにより、階層内のVandelayの上位にあるすべての請負業者、同じ階層のすべての請負業者、および階層のVandelayの下にあるすべての請負業者の3つの層が得られます。
  2. インデントと順序を保持して、3つのrelative階層の階層を示します。
  3. 2番目のソリューションの階層ラベルを保持して、請負業者のabsolute階層レベルを示します。
  4. 同じabsolute層にあるグループ請負業者。
  5. Vandelayのグループをすべての階層の中で視覚的に最も目立つようにします。
  6. Vandelayをグループ内で最も視覚的に目立つアイテムにすることで、階層のグループ化と階層構造の他のすべてのアイテムを際立たせます。

enter image description here

4
Andre Dickson

ガントチャート を使用すると、下の図に示すように、サブコンストラクター依存関係のフローを確認できる高レベルのプランを提供できます。異なるコンストラクターとサブコンストラクターの動作の間に依存関係があるかどうかを示すこともできます。

gantt

2
Asaf

これは、同じ問題について私のケースで行ったことです。ほぼ解決したと思います。それがあなたに役立つかどうか画像を確認してください。

最初の画像では、各階層を灰色の濃淡で区別しました。

gray

2番目の画像では、インデントを使用しました。

indentation

2
Harshith

特にツリーに沿ってより多くの列とより多くのデータを表示するつもりである場合は特に、あなたのアプローチは一般的に問題ないと思います。

これまでに一部の情報システムでこのインターフェイスを見たことがありますが、これを悪いUXと見なしたことはありません。ただし、実際に表示するデータの量によって異なります。ツリーの横に表示されるデータが優先事項ではない場合、他の前述のアプローチがより効果的に機能する可能性があります。

パターンの実装例として 剣道UIのTreeListウィジェット を参照してください。

また この古い質問 が関連する可能性があります。

1
Tom Pažourek