Использование таблиц в web-приложениях

Для оформления таблиц используются блоки Table set properties и Table update properties.

Эти блоки могут показаться одинаковыми. Разница между ними заключается в принципе их работы:

  • Table set properties полностью изменяет текущие настройки. Даже при установке всего одного входного поля для Table set properties изменятся все поля: станут пустыми.
  • Table update properties работает наоборот. Он изменяет только заданные поля. Это отличное решение, чтобы изменить только часть настроек для таблиц.

Какие настройки отображения могут быть установлены для таблиц?

Настройки задаются с помощью входных полей в блоках Table set properties и Table update properties.

Есть следующие поля:

  • Component ID – поле, которое определяет, к какой именно таблице будут применяться изменения;
  • Title – заголовок таблицы;
  • Style – изменяет размер строк в таблице;
  • Pagination – отвечает за многостраничные таблицы; его можно использовать в таблицах с большим количеством записей, чтобы не перегружать их;
  • Bordered – границы в таблице;
  • Visible – показать/скрыть таблицу;
  • Loading – состояние загрузки; с помощью этого параметра можно показать пользователям, что в таблице есть какие-либо изменения. 

Следующие настройки работают только при включенной пагинации:

  • Current page – выбор страницы таблицы для отображения;
  • Records for page – количество записей на одной странице в таблице;
  • Total records – общее количество записей в таблице. 

Практический пример

Применим новые знания на практике и создадим таблицу для простой модели "Task".

Из базы данных были загружены данные в таблицу по триггеру onShow. Используя блок Table set properties, можно установить настройки отображения для нее.

В Component ID необходимо выбрать нужную таблицу.

В Title нужно дать название таблице – To Do List.

Далее задается Style – Middle.

Следующий шаг – включение Pagination.

Установка Bordered. 


Необходимо включить Visible, иначе таблица будет не видна.

Включаем Loading.

Для Current page устанавливается значение 1, чтобы увидеть первую страницу.

Records for page ограничим 5.

И Total records устанавливаем на 10 (в качестве примера).

Теперь можно сохранить все настройки и проверить.

Подробнее про Loading

Таблица приняла нужный вид. Остался один недочет: статус загрузки не пропадает. Чтобы исправить это, нужно изменить значение Loading.

Необходимо, чтобы статус загрузки появлялся, когда данные загружаются в таблицу, и исчезал, когда этот процесс заканчивается. Нужен БП, который изменит properties таблицы, после того, как выполнится БП загрузки данных.

БП загрузки данных заканчивается блоком Table update data, есть триггер onDataUpdate, который запустится после обновления таблиц.

На него назначается новый БП. Далее используется блок Table update properties, чтобы изменить только одно поле, и выключается loading.

Теперь нужно сохранить изменения и таблица будет отображаться так как нужно.

Триггер onFilter

Рассмотрим триггер onFilter. Он срабатывает только при включенной пагинации, когда происходит переход по страницам таблицы. У него есть два дополнительных поля:

  • _limit – передает количество записей, которое отображается в таблице на момент срабатывания пагинации;
  • _offset – смещение, параметр, который указывает, с какой записи начинается обработка.

Настроим БП, чтобы продемонстрировать работу триггера onFilter.

Триггер onFilter срабатывает, когда в многостраничной таблице происходит переход с одной страницы на другую, то есть, пагинация.

Для таблицы, в которой есть три страницы, на каждой из которых по 5 записей, создадим БП, который будет показывать данные из полей onFilter в интерфейсе.

Для этого конвертируем поля _limit и _offset с помощью блоков to string и передадим результат в блоки notification.

Теперь при переходе с первой страницы на вторую появляются 2 сообщения: _limit - 5 и _offset - 5. Это означает, что на предыдущей странице таблицы было 5 записей (_limit) и что сейчас таблица обрабатывает записи, начиная с 5-ой (_offset).

При переходе на третью страницу появятся следующие сообщения:
_limit - 5 (т.к. на предыдущей странице также было 5 записей) и _offset - 10 (т.к. таблица обрабатывает записи, начиная с 10).

Триггеры onRowClick и onRowDoubleClick.

Они срабатывают, когда происходит клик или двойной клик на строку. У этих триггеров есть поле Record ID, которое передает ID записи, на которую кликнули. Этот триггер полезен при создании связанных таблиц и построении иерархии.

Чтобы показать принцип работы данного триггера настроим БП, который будет выводить пользователю номер строки, на которую он нажал. 

Для этого используются блоки to string и notification. В to string передается значение поля Record ID. После конвертации передадим полученное значение в поле Title блока Notification.

Другие уроки

Диагностика работы бизнес-процессов
Диагностика работы бизнес-процессов
Как обнаруживать и исправлять ошибки в приложении
Отладка и логирование
Отладка и логирование
Cпособы записи лога для отладки приложений в AppMaster
Inspired to try this yourself?

Развивайте свои навыки без кода с командой AppMaster!

Ознакомьтесь с нашими курсами и шаг за шагом узнайте, как использовать AppMaster в полной мере!

Другие ресурсы

Решите любую проблему с помощью наших экспертов.
Сэкономьте время и сосредоточьтесь на создании приложений.

Поддержка

Решите любой вопрос с помощью наших специалистов.

Поддержка

Документация

Полезная информация о начале работы и функциях.

Документация

Видео уроки

Узнайте, как использовать AppMaster с помощью видеоуроков.

Смотреть уроки

Комьюнити

Станьте частью нашего сообщества и узнайте больше.

Комьюнити