Шаблоны графического интерфейса для редактирования данных с отношением многие ко многим

Question

Я часто сталкиваюсь с ситуацией, когда мне нужно придумать графический интерфейс для редактирования данных, имеющих отношение n: m. Я ищу удобные для пользователя идеи GUI.

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

Обычно графический интерфейс напоминает что-то вроде этого:

---

Grid that shows all items from table1

Добавить элемент table3 ... _{(показывает модальное окно с элементами table3)}

---

Grid that shows all items from table3

---

После того, как пользователь выбрал элемент table3, я добавляю новую строку в table2 и обновляю сетки.

Недостатки:

• Вы можете добавлять только элементы table3 в table1, а не наоборот;
• Вы можете просматривать только элементы таблицы1 и видеть связанные элементы таблицы3;
• Мне нужна одна отфильтрованная сетка из таблиц 3 предметов и аналогичная для выбора новых предметов;

Мой вопрос:

Кто-нибудь знает лучший способ визуально просматривать и редактировать данные, имеющие отношение n: m? Или какие-нибудь хорошие образцы, которые я мог "украсть" из существующих пакетов программного обеспечения?

Answer 1

Раствор 1

Если наборы данных не слишком велики, используйте таблицу и разрешите пользователям размещать проверки в ячейках (таблица 1 - это ось X, а table3 - это ось Y).

Вероятно, вы можете сделать это для больших наборов данных table1 / 3, если вы разрешите пользователям фильтровать или иным образом ограничивать значения, отображаемые на осях x и y.

Раствор 2

Цитируя эту страницу , «отношение« многие ко многим »- это на самом деле два отношения« один ко многим »с таблицей соединений / ссылок».

Таким образом, вы можете, как одно решение, просто взять свое собственное решение и решить свои первые 2 неудобства, используя экраны / диалоговые окна для перехода к таблице 1 => 3 и 3 => 1.

Не идеальное решение, но, по крайней мере, обеспечивает все необходимые функции

Решение 3

Несколько похоже на ваше собственное решение:

1. Показать таблицу на основе table1, с:

   B. col1, содержащий элементы table1

   C. col2, содержащий список всех элементов из таблицы3, уже связанных с этим элементом из таблицы1.

   Список может быть либо горизонтальным, если обычно мало связанных элементов, либо вертикальным (прокручиваемым), если горизонтальный или слишком широкий.

   Важной частью является то, что каждый отображаемый элемент из таблицы3 имеет значок «удалить» (x) рядом с ним для быстрого удаления.

2. Позволяет выбрать, к какому элементу из таблицы1 вы хотите добавить сопоставления.

   Есть 2 способа сделать это - либо добавить флажок к каждой строке в вашей таблице, и иметь одну кнопку с надписью «добавить отношения к выбранным строкам» (формулировка нуждается в улучшении), или просто иметь 3-й столбец в таблице, содержащий кнопку / ссылку для добавления связей к этой отдельной строке.

   Первый вариант - хорошая идея, если пользователь часто добавляет один и тот же набор элементов из таблицы 3 в несколько строк из таблицы 1.

3. При нажатии кнопки / ссылки «Добавить» отображается фильтруемый список элементов с множественным выбором из таблицы 3 с кнопкой «Добавить выбранное».

4. Как и в вашем решении (см. Мой # 2), он является асимметричным, поэтому вы должны реализовать зеркальный интерфейс для отображения из table3 в table1 при необходимости.

Answer 2

Это старый вопрос, но так как я только что столкнулся с той же проблемой, только сейчас, я придумал это:

1. 2 сетки рядом друг с другом, показывающие элементы table1 и table3, с подкачкой, если необходимо.
2. Обе сетки имеют верхнюю панель инструментов, которая позволяет выполнять фильтрацию по значению из противоположной таблицы. В зависимости от ваших данных и вашей графической оболочки, это может быть выпадающая комбинированная сетка или автозаполнение ввода текста.
3. Обе сетки имеют флажки (последний или первый столбец)
4. Обе сетки содержат встроенную кнопку / действие в каждой строке для автоматической фильтрации другой сетки в этом элементе.
5. Только одна сетка отображается / помечается как «активная» или «главная» в любой момент времени (чтобы было понятно пользователю, какую сторону отношений они просматривают / контролируют).

Когда вы выбираете элемент в grid1, grid1 становится активным, и все элементы в другой сетке имеют флажки, если они связаны с выбранным элементом.

И наоборот, когда вы выбираете элемент в grid2 (таблица 3), grid2 становится активным, все флажки в grid2 пусты (или недоступны), а флажки в grid1 указывают на связь с выбранным элементом.

Фильтрующая часть упрощена благодаря встроенной кнопке, описанной в шаге 4.

Я считаю, что это решение удовлетворит все ваши требования.

Answer 3

Вот возможное решение, представленное в форме отношения сотрудников к проектам m: m. Каждый сотрудник может работать над многими проектами, в каждом проекте может участвовать много сотрудников.

Слева направо, вы показываете следующее:

Панель с информацией о выбранном сотруднике.

Список всех сотрудников, где каждый элемент списка отображает имя сотрудника в виде интерактивной ссылки или кнопки (для отображения сведений на панели сведений). В начале списка находится кнопка переключения, которая фильтрует список проектов только по тем, которые связаны с выбранным в данный момент сотрудником. Внизу списка расположена кнопка для добавления нового сотрудника, на которой отображается пустая панель сведений, готовая для ввода данных.

Вертикальное пространство посередине с одной кнопкой «Связать», позволяющей пользователю связать выбранного сотрудника с текущим выбранным проектом. Нажатие на эту кнопку откроет диалоговое окно, позволяющее пользователю ввести детали ссылки (т. Е. Как долго назначается сотрудник, какую роль будет играть сотрудник и т. Д.).

Список всех проектов, где каждый элемент списка отображает название проекта в виде интерактивной ссылки или кнопки (для отображения сведений на панели сведений). В начале списка находится кнопка переключения, которая фильтрует список сотрудников только для тех, кто связан с выбранным в данный момент проектом. Внизу списка расположена кнопка для добавления нового проекта, в которой отображается пустая панель сведений, готовая для ввода.

Панель с подробной информацией о текущем выбранном проекте.

Очевидно, вам придется ограничить размер панелей сведений, возможно, только отображая детали, относящиеся к взаимосвязи m: m. Вы даже можете добавить кнопку на панели сведений, чтобы открыть более подробное всплывающее окно, или вы можете вообще отказаться от панели сведений, если вы в основном заинтересованы в управлении ссылками. Этот интерфейс будет очень хорошо работать на широкоформатных экранах.

НТН! Клэй

Answer 4

Позвольте мне использовать пример отношения "Один клиент имеет 0 или много заказов". Если пользователь хочет просмотреть Заказы определенной формы, я бы предложил следующий вариант использования:

1. Пользователь нажимает ссылку Поиск клиента:
2. Система представляет форму поиска клиента с критериями поиска для фильтрации по
3. Пользователь заполняет критерии поиска и нажимает кнопку поиска
4. Система представляет список Заказчика ... по согласованным критериям
5. Пользователь нажимает кнопку Открыть перед клиентом
6. Система представляет Клиента (на совершенно новой странице с кнопкой «Назад к поиску»)

Новая страница имеет 3 панели - 1 панель для сведений о клиенте, вторая панель для списка заказов и 3 панели, которые заполняются при нажатии на заказ. Если количество заказов превышает 20, я бы поместил ссылку «Поиск заказов», которая ведет к совершенно новой форме поиска заказов с предопределенным идентификатором CustomerId, фиксированным с выбранным текущим идентификатором CustomerId.