Может ли кто-нибудь порекомендовать хорошо работающий интерфейс, позволяющий пользователю организовывать большое количество элементов в HTML?

Question

В настоящее время для управления «группой» вы можете щелкнуть название группы в списке доступных групп, и вы попадете на страницу с двумя рядом расположенными списками с множественным выбором. Между двумя списками расположены кнопки «Добавить» и «Удалить». Вы выбираете всех «пользователей» из левого списка и нажимаете «Добавить», и они появятся в правом списке, и наоборот. Это работает довольно хорошо для небольшого количества данных.

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

Есть ли лучшая идея интерфейса для управления этим? Или есть какие-то хорошо известные приемы, чтобы сделать его лучше и / или проще в использовании, когда в списках много «предметов»?

Answer 1

Реализовать функцию Ajax, которая перехватывает нажатие клавиш и проверяет символы, введенные пользователем в поле поиска / фильтра (на стороне сервера).Когда результаты поиска упадут ниже 50, нажмите те в браузере для отображения.

В качестве альтернативы, вы можете использовать плагин jQuery UI Autocomplete и установить минимальное числосимволов до 3, чтобы вызвать поиск.Это ограничит количество элементов списка, которые передаются в браузер.

Answer 2

Я бы сказал, что вы ударили ноготь по голове словом «фильтр». Я не самый большой поклонник параллельного мультивыбора, как то, что вы описываете, но это почти не имеет значения, какой бы элемент UX вы ни использовали, вы столкнетесь с проблемой, учитывая тысячи элементов. Итак, фильтрация. Фильтрация по строке поиска - это хорошее решение, но я подозреваю, что поиск по имени - не самый быстрый способ добраться до пользователей, которых хочет администратор. Что еще вы знаете о пользователях? Как они сгруппированы.

Например, если бы эти пользователи были учениками старшей школы, мы бы знали о них некоторые метаданные: в каком классе они учатся? Сколько им лет? В каком потоке они учатся? Каков их средний балл? ... обеспечение фильтрации этих фрагментов метаданных является одним из способов ограничения количества студентов, доступных одновременно. Если у вас слишком много, чтобы начать, и это вызывает проблемы с производительностью, подумайте только об их ограничении, у вас есть кнопка, чтобы загрузить больше, и показывать только 100 за раз.

Обновление: последний пункт здесь по сути то, что Джесси предлагает ниже.

Answer 3

Я бы отказался от использования собственного списка в вашем браузере и реализовал решение в HTML / CSS с использованием списков или таблиц (в зависимости от ваших потребностей). Затем вы можете использовать JavaScript и AJAX, чтобы получить только ту часть данных, которая вам нужна. Наблюдайте за действиями пользователя и извлекайте следующие 50 записей, прежде чем они действительно получат их. Это создаст иллюзию того, что все записи загружаются во время выполнения.

iPhone делает такие вещи, чтобы сохранить память для TableViews. Я бы взял эту идею и применил бы ее к вашему делу.