web-dev-qa-db-ja.com

テーブルのネストされた子行

以前にux.stackexchangeにWebアプリケーションの構成設定を表示する方法を教えてもらいました。

ページに文字列とブール値の両方を表示する方法

私は提案に従い、アプリケーションを更新しました(興味のある方は、value列に_ BOOLEAN _は実際の値であり、その場合の表示値はenabledに基づいて「有効」または「無効」を示しますブール列):

enter image description here

私の新しい問題は、子オブジェクトをネストする必要があることです。たとえば、上のスクリーンショットでは、「アラートの作成」が親設定で、「メールモジュールエンドポイント」と「メールテンプレートファイル」が子設定になります。 「アラートの作成」が無効になっている場合、子の設定はグレー表示/無効になります。また、子設定には独自の子設定を含めることもできます。行を展開したり折りたたんだりするつもりはありません。私は関係を示す必要があるだけです。

このように表示したいと思います。

enter image description here

私は現在、データテーブルを使用して設定を表示していますが、私がやろうとしているのは ネイティブではサポートされていません のようです。

私はデータベース側を把握していますが、UX側に問題があります。オンラインで見つけられるもののほとんどは、テーブル内にテーブルをネストする例です。これは、私がやろうとしていることとはまったく異なります。

したがって、最終的に私が助けを必要とするのは、子オブジェクトを表示する方法です。 2番目のイメージのように見えるようにする必要がありますが、1番目のイメージは現在のイメージです。

これらを表示するには何を使用すればよいですか?データテーブルでそれを行う方法はありますか、それともより良い別の方法がありますか?

3
Chris

インデント方式は、子オブジェクトを表示するのに十分強力だと思います。また、子オブジェクトは親オブジェクトと同じ色の背景を使用する必要があると思います。この方法は、ユーザーがテーブルをスキャンする方が簡単です。

1