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

StackOverflow https://stackoverflow.com/questions/1600801

Вопрос

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

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

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

Grid that shows all items from table1

Добавьте элемент таблицы3... (показывает модальное окно с элементами таблицы3)

Grid that shows all items from table3

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

Недостатки:

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

Мой вопрос:

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

Это было полезно?

Решение

Решение 1

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

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

Решение 2

Процитирую из эта страница, "Отношение "многие ко многим" на самом деле представляет собой два отношения "один ко многим" с таблицей соединений".

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

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

Решение 3

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

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

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

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

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

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

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

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

    Первое является хорошей идеей, если пользователь, вероятно, часто будет добавлять точно такой же набор элементов из table3 в несколько строк из table1.

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

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

Другие советы

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

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

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

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

Часть фильтрации упрощается с помощью встроенной кнопки, описанной на шаге 4.

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

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

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

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

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

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

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

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

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

ХТХ!Клай

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

  1. Пользователь нажимает на ссылку "Поиск клиента":
  2. Система представляет форму поиска клиента, содержащую критерии поиска для фильтрации
  3. Пользователь заполняет Критерии поиска и нажимает кнопку Поиска
  4. Система представляет список Клиентов ...по соответствующим критериям
  5. Пользователь нажимает кнопку Открыть перед Клиентом
  6. Система представляет Клиента (на совершенно новой странице с кнопкой "Вернуться к поиску").

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top