多対多の関係でデータを編集するためのGUIパターン

Question

n：mの関係を持つデータを編集するためにGUIを作成する必要がある状況によく遭遇します。ユーザーフレンドリーなGUIのアイデアを探しています。

[table1]
   |
  /|\
[table2]
  \|/
   |
[table3]

通常、GUIは次のようになります。

---

table1のすべてのアイテムを表示するグリッド

table3アイテムを追加... _{（table3アイテムを含むモーダルウィンドウを表示）}

---

table3のすべてのアイテムを表示するグリッド

---

ユーザーがtable3アイテムを選択した後、新しい行をtable2に追加し、グリッドを更新します。

欠点：

• table1に追加できるのはtable3アイテムのみで、その逆はできません。
• table1アイテムのみを参照し、関連するtable3アイテムを表示できます。
• フィルタリングされたtable3アイテムのグリッドと、新しいアイテムを選択する同様のグリッドが必要です。

私の質問：

n：m関係にあるデータを視覚的に参照および編集するより良い方法を知っている人はいますか？ または、「盗む」ことができる素敵なパターン。既存のソフトウェアパッケージから？

Answer 1

ソリューション1

データセットが大きすぎない場合は、テーブルを使用して、ユーザーがセルにチェックを配置できるようにします（テーブル1はX軸で、テーブル3はY軸です）。

ユーザーがフィルター処理するか、x軸とy軸に表示する値を制限できる限り、おそらくより大きなtable1 / 3データセットに対してこれを行うことができます。

ソリューション2

このページから引用するには、＆quot;多対多の関係はジャンクション/リンクテーブルとの実際の2つの1対多の関係」。

このように、画面/ダイアログをテーブル1 =＆gt; 3および3 =＆gt; 1に移動させることで、1つのソリューションとして独自のソリューションを採用し、最初の2つのデメリットを解決できます。

完璧なソリューションではありませんが、少なくとも必要な機能をすべて提供しています

ソリューション3

あなた自身のソリューションにいくらか似ています：

1. table1に基づいてテーブルを表示します。

   B。 table1要素を含むcol1

   C。既にtable1のこの要素に関連付けられているtable3のすべての要素のリストを含むcol2。

   リストは、通常、要素がほとんど関連付けられていない場合は水平に、水平から広すぎる場合は垂直（スクロール可能）にできます。

   重要な部分は、table3から表示されるすべての要素に「削除」があることです。すぐに削除できるように、その横にあるアイコン（x）。

2. table1からマッピングを追加する要素を選択できます。

   これを行うには2つの方法があります。テーブルのすべての行にチェックボックスを追加するか、「選択した行に関係を追加」というラベルの付いたボタンを1つ持つか、 （文言の改善が必要）、 または、テーブルに3番目の列があり、その個々の行に関係を追加するためのボタン/リンクが含まれています。

   前者は、ユーザーがtable3のまったく同じ要素セットをtable1の複数の行に頻繁に追加する可能性が高い場合に適しています。

3. 「追加」する場合ボタン/リンクをクリックすると、table3の要素のフィルター可能な複数選択リストが表示されます。ボタン。

4. ソリューション（私の＃2を参照）と同様に、これは非対称であるため、必要に応じてtable3からtable1にマッピングするためのミラーUIを実装する必要があります。

Answer 2

これは古い質問ですが、私が今また同じ問題に直面したので、私はこれを思いつきました：

1. 2つのグリッド、並べて、必要に応じて、ページ1とテーブル3の項目を表示します。
2. 両方のグリッドには、反対側のテーブルの値によるフィルタリングを可能にする上部ツールバーがあります。データとGUIフレームワークに応じて、ドロップダウンコンボグリッド、またはオートコンプリートテキスト入力になります。
3. 両方のグリッドにチェックボックスがあります（最後または最初の列）
4. 両方のグリッドの各行にはインラインボタン/アクションが含まれ、そのアイテムの他のグリッドを自動的にフィルタリングします。
5. 「アクティブ」として表示/マークされるグリッドは1つだけですまたは「マスター」いつでも（ユーザーに対して、関係のどちら側を表示/制御しているかを明確にするため）。

grid1でアイテムを選択すると、grid1がアクティブになり、他のグリッドのすべてのアイテムが選択されたアイテムに関連付けられている場合はチェックボックスがオンになります。

逆に、grid2（table3）の項目を選択すると、grid2がアクティブになり、grid2のすべてのチェックボックスは空白（または淡色表示）になり、grid1のチェックボックスは選択した項目との関連付けを示します。

ステップ4で説明したインラインボタンに基づいて、フィルタリング部分が簡単になります。

このソリューションはすべての要件を満たすと思います。

Answer 3

これは、従業員からプロジェクトへのm：m関係の形式で与えられる可能な解決策です。各従業員は多くのプロジェクトに取り組むことができ、各プロジェクトには多くの従業員が関与できます。

左から右に、次を表示します。

現在選択されている従業員の詳細を示すパネル。

すべての従業員のリスト。リストの各項目には、従業員の名前がクリック可能なリンクまたはボタンとして表示されます（詳細パネルに詳細を表示するため）。リストの先頭には、現在選択されている従業員に関連するプロジェクトのみにプロジェクトリストをフィルターするトグルボタンがあります。リストの一番下には、新しい従業員を追加するボタンがあり、入力を受け入れる準備ができた空の詳細パネルが表示されます。

単一の「リンク」がある中央の垂直方向のスペース。ユーザーが現在選択されている従業員を現在選択されているプロジェクトにリンクできるボタン。このボタンをクリックするとダイアログが開き、ユーザーはリンクの詳細（つまり、従業員が割り当てられている期間、従業員が果たす役割など）を入力できます。

すべてのプロジェクトのリスト。リストの各項目には、プロジェクトの名前がクリック可能なリンクまたはボタンとして表示されます（詳細パネルに詳細を表示するため）。リストの先頭にあるトグルボタンは、従業員リストを、現在選択されているプロジェクトに関連付けられているものだけにフィルターします。リストの下部には、新しいプロジェクトを追加するためのボタンがあり、入力を受け入れる準備ができた空の詳細パネルが表示されます。

現在選択されているプロジェクトの詳細を示すパネル。

明らかに、m：m関係に関連する詳細のみを表示することにより、詳細パネルのサイズを制限する必要があります。詳細パネルにボタンを追加して、より詳細なポップアップウィンドウを開くこともできますし、主にリンクの管理に関心がある場合は、詳細パネルを完全に削除することもできます。このUIは、ワイドアスペクト画面で非常にうまく機能します。

HTH！クレイ

Answer 4

One Customer Has 0またはmany Ordersリレーションシップの例を使用してください。ユーザーが特定のフォームの注文を見たい場合は、次の使用例をお勧めします。

1. ユーザーが[顧客の検索]リンクをクリックします：
2. システムは、フィルタリングする検索条件を持つ検索顧客フォームを提示します
3. ユーザーが検索条件を入力し、検索ボタンを押します
4. システムは、顧客のリストを表示します...一致した基準により
5. ユーザーが顧客の前にある[開く]ボタンを押した
6. システムは顧客を表示します（まったく新しいページに＆quot; [検索に戻る]ボタン＆quot;）

新しいページには3つのパネルがあります。顧客の詳細用の1つのパネル、注文のリスト用の2番目のパネル、注文がクリックされたときに表示される3つのパネルです。注文の数が20を超える場合は、選択した現在のCustomerIdで固定された定義済みのCustomerIdを持つ注文のまったく新しい検索フォームへの[検索注文]リンクを配置します。