Как вывести данные в виде таблицы - верстка товарной сетки

Задача: разместить в виде таблицы данные из списка.

Статья состоит из теоретической и практической частей.
В первой части вспомним, как таблицы создаются в 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- содержимое ячейки, то есть элемент параметра-коллекции. Именно так обращаемся к значениям отдельных элементов.

Получается, для вывода данных из коллекции в таблице:

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}

Добавляем в наш пример 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>