Как вывести данные в виде таблицы - верстка товарной сетки
Задача: разместить в виде таблицы данные из списка.
Статья состоит из теоретической и практической частей.
В первой части вспомним, как таблицы создаются в HTMl, как работает вывод коллекций с помощью цикла и как разбить коллекцию на строки, чтобы вывести ее в виде таблицы.
Во второй части — примеры. Можете перейти сразу к ней и скопировать верстку подходящей таблицы.
Теоретическая часть
Как это работает в HTML
В HTML для создания таблицы используются теги:
- <table> — создает контейнер для таблицы;
- <tr> — задает строку в таблице;
- <td> — задает ячейку в строке.
Например, следующая верстка:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Создает таблицу вида:
Для удобства восприятия ячейки здесь и в остальных примерах отделили друг от друга границей.
Как вывести коллекцию
Принцип работы с коллекциями заключается в том, что мы не записываем код отдельно для каждого его элемента (как в примере выше). Вместо этого мы используем цикл for. Внутри него записываем код, который применяется столько раз, сколько элементов в коллекции.
Например, для вывода названий всех продуктов из коллекции Products.GetBySegment("Novinki").Take(6) напишем:
@{for item in Products.GetBySegment("Novinki").Take(6)}
Название: ${item.Name}
@{end for}
Данные при этом выводятся в одну строку.
Добавление переноса строки (<br>) после названия выведет все продукты друг под другом.
А если нужно вывести элементы в таблице?
Запуск цикла между <table> и <tr> создаст новый ряд для каждого элемена — получится таблица с одним столбцом.
Запуск цикла между <tr> и <td> создаст один ряд с новым столбцом для каждого элемена — получится таблица с одним рядом и множеством столбцов.
Решение — найти способ проходиться циклом по строкам таблицы.
Как разбить коллекцию на строки и ячейки
Используем функцию TableRows.
Она группирует параметр-коллекцию в строки по N элементов. После этого можно вывести строки и колонки таблицы при помощи циклов.
TableRows принимает два параметра:
- список объектов (параметр-коллекцию);
- число столбцов в таблице.
TableRows возвращает коллекцию строк таблицы. У каждой строки есть поля:
Index- номер строки в таблице (начиная с 1).IsFirst- является ли строка первой.IsLast- является ли строка последней.ValueCount- сколько в строке ячеек, у которых значение не пустое.
Например, если попытаться разместить список из 8 позиций в виде таблицы с 5 колонками, в первой строке ValueCount будет равен 5, а во второй — 3, потому что во второй строке часть ячеек не будут содержать значения.Cells- коллекция ячеек в строке. Ячеек всегда столько, сколько указано в качестве параметра функции TableRows, даже если значений в параметре меньше. У каждой ячейки есть поля:Index- номер столбца в таблице (начиная с 1).IsFirst- является ли ячейка первой.IsLast- является ли ячейка последней.Value- содержимое ячейки, то есть элемент параметра-коллекции. Именно так обращаемся к значениям отдельных элементов.
Значение Value у ячейки может быть пустым (null), если количество элементов в параметре не делится ровно на количество ячеек. Письмо с ячейкой без значения не сможет сформироваться и отправиться. Поэтому нужно проверять, является ли Value ячейки пустым.
Получается, для вывода данных из коллекции в таблице:
1. разбиваем коллекцию на строки таблицы с помощью TableRows;
2. разбиваем строки на ячейки с помощью Cells;
3. проверяем, что ячейка не пустая;
4. обращаемся к значению элемена в ячейке с помощью Value.
Пример:
@{for row in Tablerows(Products.GetBySegment("Novinki").Take(6), 3)}
@{for cell in row.Cells}
@{if cell.Value != null}
Название: ${cell.Value.Name}
@{end if}
@{end for}
@{end for}
TableRows лишь отбирает строки в группы. Выводит он их всё равно подряд. Поэтому нужно использовать TableRows вместе с HTML-тегами.
Добавляем в наш пример HTML-теги:
<table>
@{for row in Tablerows(Products.GetBySegment("Novinki").Take(6), 3)}
<tr>
@{for cell in row.Cells}
<td>
@{if cell.Value != null}
Название: ${cell.Value.Name}
@{end if}
</td>
@{end for}
</tr>
@{end for}
</table>
Практическая часть
В качестве примера называем коллекцию Products и выводим название Name.
При переносе в свою рассылку замените их на нужные вам параметры.
Пример 1
Макет:
Выводим все элементы одинаково. Если значения нет, ячейку оставляем пустой.
Код вёрстки:
<table>
@{ for row in tableRows(Products, 3) }
<tr>
@{for cell in row.Cells}
<td>
@{if cell.Value != null}
${cell.Value.Name}
@{end if}
</td>
@{end for}
</tr>
@{end for}
</table>
Пример 2
Макет вёрстки:
В ячейках, где нет элемента, выводится плейсхолдер.
Код вёрстки:
<table>
@{ for row in tableRows(Products, 3) }
<tr>
@{ for cell in row.Cells }
<td>
@{ if cell.Value != null }
${ cell.Value }
@{ else }
-
@{ end if }
</td>
@{ end for }
</tr>
@{ end for }
</table>
Пример 3
Макет вёрстки:
В последней строке, в случае недостатка элементов, другая верстка. Например, с объединением ячеек.
Код вёрстки:
<table>
@{ for row in tableRows(Products, 3) }
@{ if row.ValueCount = 3 }
<-- Вёрстка для нормальной строки, где есть все элементы -->
<tr>
@{ for cell in row.Cells }
<td>
${ cell.Value.Name }
</td>
@{ end for }
</tr>
@{ else }
<tr>
<td colspan="3">
<-- Таблица внутри нижней строки, например -->
<table>
<tr>
@{ for cell in row.Cells }
@{ if cell.Value != null }
<td>
${ cell.Value.Name }
</td>
@{ end if }
@{ end for }
</tr>
</table>
</td>
</tr>
@{ end if }
@{ end for }
</table>
Пример 4
Макет вёрстки:
У последней строки другой стиль, у каждого первого элемента в строке другой стиль.
Код вёрстки:
<table>
@{ for row in tableRows(Products, 3) }
<tr class="${ if (row.isLast, "red", "regular") }">
@{ for cell in row.Cells }
@{ if cell.Value != null }
<td class="${ if (cell.isFirst, "highlight", "regular") }">
${ cell.Value }
</td>
@{ end if }
@{ end for }
</tr>
@{ end for }
</table>