Лучший способ отобразить это в форме?

Question

На моем сайте у меня есть две таблицы, которые связаны с помощью сводной таблицы. То, что я пытаюсь сделать, это позволить пользователю обновить отношения между двумя таблицами (вставка и удаление записей из сводной таблицы). У меня нет проблем с этим в PHP, но меня беспокоит то, как форма отображается в веб-браузере пользователя.

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

Как можно было бы показать эту форму пользователю?

Answer 1

Может быть, использовать сетку данных? Это довольно мощные:

• jQuery TableFilter (нажмите «Перейти»)
• Фильтр сетки ExtJS (щелкните маленькую стрелку вниз ▼, которая появляется рядом с именем столбца)

Однако может потребоваться много времени, чтобы заставить его работать через Ajax.

Answer 2

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

Несколько прогрессов, через которые я пробежусь:

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

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

• Динамическая таблица
  Чуть более сложным было бы добавить немного специй к вашему столу. Вместо отображения строк и столбцов флажков используйте графические значки / изображения. Они намного проще для глаз и, вероятно, позволят вам более жестко контролировать размеры стола. Весь пользовательский интерфейс мог бы тогда быть сделан через Javascript и по щелчку - что довольно легко в наши дни, если вы используете что-то вроде JQuery.

• Разделить интерфейс
  Это основано на предположении, что все комбинации Таблицы A и Таблицы B не настроены в сводной таблице для начала - только когда пользователь пытается связать A.item с B.item
  Вместо того, чтобы показывать все возможные комбинации, показывайте только те, которые активны (есть запись в сводной таблице). Затем предоставьте пользователю вторую форму (возможно, из двух раскрывающихся списков), которая позволяет ему связать запись из первой таблицы со второй.

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

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