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

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

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

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

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

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

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

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

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

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

$Table = new Rcl_Table(array(
    'cols' => array(
        array(
            'title' => __('Первая колонка'),
            'align' => 'left',  //выравнивание по левому краю
            'width' => 20       //20% от общей ширины
        ),
        array(
            'title' => __('Вторая колонка'),
            'align' => 'center', //выравнивание по центру
            'width' => 60       //60% от общей ширины
        ),
        array(
            'title' => __('Третья колонка'),
            'align' => 'right', //выравнивание по правому краю
            'width' => 20       //20% от общей ширины
        )
    ),
    'zebra' => true, //чередование темного и светлого фона строк
    'border' => array(
        'table',    //граница для всей таблицы
        'cols',     //граница для колонок
        'rows'      //граница для строк
    )
));

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

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

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

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

$Table->add_row(array('11', '12', '13'));

$Table->add_row(array('21', '22', '23'));

$Table->add_row(array('31', '32', '33'));

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

echo $Table->get_table();

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

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

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

$Table = new Rcl_Table(array(
    'cols' => array(
        array(
            'title' => __('Объекты'),
            'align' => 'center',
            'width' => 40,
            'total' => __('ИТОГО') //указываем место вывода заголовка для ИТОГО
        ),
        array(
            'title' => __('Параметр 1'),
            'align' => 'right',
            'width' => 20,
            'totalsum' => true //помечаем необходимость подсчета значений в колонке
        ),
        array(
            'title' => __('Параметр 2'),
            'align' => 'right',
            'width' => 20,
            'totalsum' => true //помечаем необходимость подсчета значений в колонке
        ),
        array(
            'title' => __('Параметр 3'),
            'align' => 'right',
            'width' => 20,
            'totalsum' => true //помечаем необходимость подсчета значений в колонке
        )
    ),
    'zebra' => true,
    'border' => array(
        'table',
        'cols',
        'rows'
    ),
    'total' => true //указываем необходимость формирования строки ИТОГО
));

//заполняем таблицу данными
$Table->add_row(array('Объект 1', '11', '32', '23'));
$Table->add_row(array('Объект 2', '31', '22', '33'));
$Table->add_row(array('Объект 3', '21', '34', '13'));

//выводим таблицу
echo $Table->get_table();

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

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

'cols' => array(
        array(
            'title' => __('Объекты'),
            'align' => 'center',
            'width' => 40,
            'total' => __('ИТОГО')
        ),
        array(
            'title' => __('Параметр 1'),
            'align' => 'right',
            'width' => 20,
            'totalsum' => true,
            'sort' => 'id_1' //идентификатор сортировки
        ),
        array(
            'title' => __('Параметр 2'),
            'align' => 'right',
            'width' => 20,
            'totalsum' => true,
            'sort' => 'id_2' //идентификатор сортировки
        ),
        array(
            'title' => __('Параметр 3'),
            'align' => 'right',
            'width' => 20,
            'totalsum' => true,
            'sort' => 'id_3' //идентификатор сортировки
        )
    )

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

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

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

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

Всем добра!

5

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

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

Андрей CS

12K
занят
Комментарии: 2764Публикации: 492Регистрация: 30-11--0001Продаж/Покупок: 0/0