Публикация в группе: Плагин WP-Recall - Личный кабинет на WordPress

Категории группы: Полезное

Приветствую!

Простому разработчику часто приходится сталкиваться с необходимостью представления табличных данных. Статистика, различные списки, выборки по какой то истории предполагают их вывод именно в таблице и зачастую приходится склоняться к использованию тега 'table' и его дочерних элементов. Одна беда - адаптивность такой таблицы на нуле. У каждого свои варианты решения проблемы: подключение js-библиотек, css-костыли под различные разрешения, а кто то вообще не ломает голову над этим и "отдает как есть", что приводит к головной боли конечного пользователя.

Так как нам также приходится использовать таблицы в своей работе, то мы задумались над реализацией универсального подхода, который позволил бы удобно и быстро строить простые таблицы через встроенный инструментарий WP-Recall.

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

  • построение таблицы на flex-блоках
  • встроенная поддержка адаптивности для мобильных устройств
  • единое ядро css и возможно js для всех таблиц
  • возможность дальнейшего расширения возможностей

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

В версии WP-Recall 16.17.0 появился новый класс, который и будет отвечать за построение таблиц - Rcl_Table().

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

Мы видим, что массив 'cols' состоит из перечня массивов, которые содержат основную информацию о колонках таблицы, там можно задать количество колонок, их заголовки, порядок выравнивания текста и ширину.

Значение ширины указывается с шагом 5, от 10 далее 15, 20, 25 и так далее. В сумме ширина колонок должна составлять 100.

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

Теперь нам потребуется наполнить таблицу данными. Вставим три строки с произвольными данными:

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

В результате мы получим аккуратную табличку:

А пользователи на мобилках увидят уже это:

Давайте чуть усложним нашу таблицу и добавим автоматическое формирование нижней строки ИТОГО. Для этого добавим еще одну колонку и внесем изменения в первоначальный массив параметров таблицы:

Таблица будет иметь такой вид:

Рассмотрим возможность сортировки строк по определенному значению. Дополняем массив параметров определенной колонки указанием значения идентификатора сортировки:

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

Заметим, что строка ИТОГО в сортировке не участвует.

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

Буду рад услышать вопросы и предложения по описанному функционалу в комментариях.

Всем добра!

4

Автор публикации

не в сети 10 часов

Андрей CS

11K
Skype-консультации - 1000 р/час
Комментарии: 2240Публикации: 450Регистрация: 30-11--0001Продаж/Покупок: 26711/143