Альтернативы сеткам в CRUD-приложениях?

Итак, вам было поручено создать базовое приложение CRUD. И у него есть эта страница, которая служит для перечисления всех элементов инвентаря ... если ваш пользователь хочет отредактировать какой-либо из них, рядом с каждым элементом есть кнопка «Изменить».

Вы знаете, что делать.

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

Но подумав об этом ... Интересно, каковы хорошие альтернативы использованию сеток при создании страницы CRUD, отображающей много данных?

Не говоря уже о проблемах, связанных с ajax / скоростью / безопасностью / реализацией ...

What are some good alternatives to using a grid in large CRUD pages?

Я готов обменять удобство использования на эстетику, если это будет иметь значение.

Зависит от данных, как часто они обновляются, какие части данных обычно обновляются, какие это данные, есть ли раскрывающиеся списки, поля с произвольным текстом, средства выбора даты, сколько за раз, сколько пользователей, и т.д. и т.п. просто слишком много переменных, чтобы дать ответ.

Adam Ralph 22.01.2009 22:26
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
6
1
2 754
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

Примером может служить список контактов чата Gmail (снимок экрана здесь).

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

Ответ принят как подходящий

Для отображения относительно небольшого количества полей для большого количества записей нет ничего плохого в табличном представлении, таком как сетка, особенно если задача включает поиск или сравнение записей. Там является что-то не так с кнопками Edit для открытия отдельного окна или страницы для редактирования. Это означает, что пользователь должен изучить два окна и то, как перемещаться между ними, а это занимает больше времени.

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

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

Если у вас много записей а также много полей, вы можете комбинировать табличные данные с макетом, подобным форме, используя комбинацию «главный-подробный». В таблице вверху страницы отображаются ключевые поля для записей, а в форме внизу страницы отображаются поля «переполнения» для любой записи в таблице, которая в данный момент находится в фокусе.

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

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

Выберите макет, который максимизирует производительность пользователей для ваших пользователей, задач и рабочей среды.

Отображаемые данные представляют собой табличные данные, поэтому имеет смысл отображать их в виде таблицы, я не вижу другого приемлемого решения.

Однако для функционального представления данных можно комбинировать различные решения:

  • Если ваша основная таблица данных извлекает и показывает некоторые данные, поступающие из реляционной таблицы MySQL, вы можете отобразить их в сворачиваемой вложенной таблице.
  • Встроенные полосы прокрутки браузера немного уродливы, вы можете использовать некоторые плагины Javascript, такие как OverlayScrollbars, для улучшения взаимодействия с пользователем.
  • Некоторые данные MySQL должны отображаться с первого взгляда, это основная важная информация, тогда как другие являются вторичными данными, детали, которые могут отображаться только в том случае, если пользователь хочет их увидеть. Для этой цели я использую другой плагин, который добавляет первый столбец в таблицу, когда вы щелкаете по нему, он показывает сворачиваемую строку с дополнительными вторичными данными.
  • Наконец, при желании вы можете прикрепить основной заголовок таблицы вверху, чтобы пользователь всегда мог видеть заголовки столбцов.

Вы можете увидеть все эти уловки в действии здесь, в Демонстрация базы данных MySQL Sakila.

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