шаблон пользовательского интерфейса для привязки одного или нескольких объектов к объекту

Question

Нужны предложения по реализации связывания одного или нескольких объектов с сущностью.

1. Все игроки футбольной команды регистрируются индивидуально (например, они являются частью таблицы «игроков»)

2. В футбольной команде много игроков. Последовательность кликов выглядит так: a) Владелец футбольной команды дает название и краткое описание футбольной команды. б] Теперь он хочет добавить игроков в эту команду. c] У вас есть следующая кнопка «Добавить игроков в команду», с помощью которой вы можете перейти на страницу «Просмотр игроков» и выбрать нескольких пользователей оттуда.

Предполагая, что список игроков разбит на страницы, как вы справляетесь со следующим: -

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

Ищу идеи о том, как реализовать это или сайты, которые уже сделали что-то подобное.

Answer 1

Быстрый взгляд на пользовательский интерфейс на http://www.extjs.com/deploy/dev/examples/writer/writer.html

У меня будет поле автозаполнения, в котором будет отображаться список игроков и добавление его в футбольную команду, когда пользователь нажимает клавишу ввода или кнопку

Answer 2

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

2. Два дизайна:

   а. Страница игроков , на которой показан сортируемый / фильтруемый список всех игроков. Список включает в себя поле только для чтения, идентифицирующее команду, в которой находятся игроки. Пусто, если игроки не в команде. Для игроков без команды рядом с этим полем стоит флажок «Зарегистрироваться». Если этот флажок установлен, поле заполняется именем команды пользователя. Снятие отметки очищает поле. Любые игроки, которые в настоящее время находятся в команде пользователя, отмечены флажком независимо от того, когда они были добавлены. Этот дизайн предпочтителен, если есть несколько функций, которые пользователь может применить к игрокам через эту страницу, избегая сложности наличия отдельных страниц для каждой функции, что усложняет навигацию и снижает гибкость пользователя. Страница «Игроки» - это общая страница «Управление игроками», к которой пользователь может перейти из главного меню, а не только с помощью кнопки «Добавить игроков». Обратите внимание, например, что он также позволяет пользователям удалять игроков из своей команды, что может пригодиться (например, «Подожди минутку. Я положил Даниэль Бекхэм в мою команду вчера, когда я хотел ». Дэвид Бекхэм! »). Конечно, пользователи также должны иметь возможность удалять игроков непосредственно со своих соответствующих страниц Команды.

   б. Доступные игроки * Страница 1020 *, которая показывает сортируемый / фильтруемый список только игроков, не назначенных в команду. В этом случае игроки, которые уже назначены в команду пользователя (или любую команду), не отображаются в списке. Этот дизайн предпочтителен, когда обычно большинство игроков уже находятся в командах, и вы хотите избежать прокрутки пользователя или страницы игроками, которые не могут быть добавлены (или иным образом отредактированы / обработаны). В одном из вариантов этого дизайна «Доступные игроки» - это немодальное диалоговое окно, которое вставляется на страницу «Команда», когда пользователь нажимает «Добавить игроков». Вместо флажка рядом с каждым игроком есть кнопка «Добавить». Нажатие кнопки «Добавить» удаляет игрока из списка «Доступные игроки», и пользователь видит, что игрок появляется в их списке командных игроков. Аналогичным образом, удаление игрока из списка командных игроков удаляет игрока из команды и вставляет его в панель «Доступные игроки». Конечно, Delete Player также должен быть доступен без предварительного открытия панели «Доступные игроки». Для поддержки опытных пользователей вы также можете разрешить множественный выбор обычными методами (перетаскивание, нажатие ctrl, shift-click) и позволить пользователю перетаскивать игроков на панель «Доступные игроки» и обратно.

3. Фильтры в верхней части страницы хороши, если вы ожидаете, что пользователи будут использовать их регулярно. Однако для списка левое или правое поле может быть лучше для фильтров, позволяя пользователю видеть как можно больше игроков без прокрутки. Если фильтры представляют собой редко используемую экспертную функцию, задайте для них настройку на другой странице или сделайте их скрытыми по умолчанию. Всегда указывайте текущие настройки фильтра на странице «Игроки». Если фильтры находятся на странице «Игроки», в идеале они (а) не должны занимать слишком много места (скажем, не более 150 вертикальных пикселей вверху), (б) применяются мгновенно (т. Е. «Граненый поиск»), (c) не прокручивать из поля зрения, когда пользователь прокручивает список вниз.

Answer 3

У меня будет что-то похожее на следующее:

     Players                     Roster
+---------------+          +---------------+  
|               |          |               |
|               |          |               |
|               |          |               |
|               |          |               |
+---------------+          +---------------+

Filter: ---------

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

Текстовое поле «Фильтр» позволит пользователю ввести частичное имя и отфильтровать список, чтобы упростить поиск нужного игрока.

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

Я намеренно оставил эту платформу независимой, поскольку вы не упомянули, было ли это для настольного или веб-приложения.

Так как это для веб-приложения, я бы предложил сделать каждого игрока в списке своим отдельным div, используя jQuery Draggable для включения функции перетаскивания и используя функцию jJuery AJAX для отправки обратно на сервер, чтобы игрок добавляется в реестр.