Шаблоны GUI для редактирования данных с отношением "многие-ко-многим"

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

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

Обычно GUI напоминает что-то вроде этого:

Grid that shows all items from table1

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

Grid that shows all items from table3

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

Недостатки:

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

Мой вопрос:

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

Ответ 1

Решение 1

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

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

Решение 2

Для цитаты из на этой странице, "отношения" многие ко многим "- это действительно два отношения" один ко многим "с соединением/таблица ссылок".

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

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

Решение 3

Совсем похоже на ваше собственное решение:

Показать таблицу, основанную на таблице1, с помощью:

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

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

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

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

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

Первая - хорошая идея, если пользователь, скорее всего, часто добавит точно такой же набор элементов из таблицы3 в несколько строк из таблицы1.
Когда нажата кнопка "Добавить" /ссылка, вы показываете список фильтров с возможностью выбора из таблицы3 с кнопкой "Добавить выбранный".
Как и в вашем решении (см. мой № 2), это симметрично, поэтому вы должны реализовать зеркальный интерфейс для отображения из таблицы 3 в таблицу 1. Если это необходимо,

Ответ 2

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

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

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

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

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

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

Панель, показывающая детали выбранного проекта.

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

НТН! Клэй

Ответ 3

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

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

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

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

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

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

Ответ 4

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

Пользователь нажимает ссылку "Поиск клиента":
Система представляет форму поиска для клиентов, для которой критерии поиска для фильтрации
Пользователь заполняет критерии поиска и нажимает кнопку "Поиск"
Система представляет список клиентов... по согласованным критериям
Пользователь нажимает кнопку Open перед клиентом
Система представляет Заказчика (на абсолютно новой странице с кнопкой "Назад к поиску" )

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