В этой статье рассматривается создание динамических таблиц с помощью Alpine JS, облегченной среды JavaScript. Мы разобьем процесс на три раздела: заголовок, тело и нижний колонтитул, уделив особое внимание как базовым, так и сложным сценариям.

Настройка:

1. Структура HTML: Мы начинаем с базового элемента HTML () с прикрепленной директивой x-data. Эта директива привязывает реактивные данные к элементу.
2. Данные JavaScript: Мы определяем пустой объект JavaScript (данные) вне HTML для хранения данных нашей таблицы.

Исходный код приведен ниже:


Заголовок

• Мы используем элемент thead для заголовка.
• Директива x-for перебирает данные table.customHeader, динамически создавая строки и столбцы.
• Сложные заголовки могут использовать атрибуты colspan и rowspan (определенные в col.attr) для объединения ячеек.
• Содержимое каждой ячейки отображается с помощью x-html и привязано к свойству col.title.

let data = {
  table: {
      customHeader: [
          [
              { title: 'City', attr: { rowspan: 2 }, class: 'border-r border-t' },
              { title: 'Clothes', attr: { colspan: 3 }, class: 'border-r border-t' },
              { title: 'Accessories', attr: { colspan: 2 }, class: 'border-t' }
          ],
          [
              { title: 'Trousers', class: 'border-r' },
              { title: 'Skirts', class: 'border-r' },
              { title: 'Dresses', class: 'border-r' },
              { title: 'Bracelets', class: 'border-r' },
              { title: 'Rings' },
          ]
      ],
  }
}

Тело

• Элемент tbody содержит строки данных таблицы.
• Мы перебираем table.data, используя x-for.
• В каждой строке находятся ячейки (), заполненные данными из соответствующих свойств объекта с использованием x-текста.

  И вот данные, которые мы хотим показать:
  

  data: [
      { "city": "Mandalay", "trousers": 79, "skirts": 16, "dresses": 14, "bracelets": 69, "rings": 99 },
      { "city": "George Town", "trousers": 68, "skirts": 24, "dresses": 90, "bracelets": 96, "rings": 48 },
      { "city": "Gent", "trousers": 26, "skirts": 60, "dresses": 67, "bracelets": 5, "rings": 43 },
      { "city": "Mombasa", "trousers": 34, "skirts": 62, "dresses": 18, "bracelets": 75, "rings": 78 },
      { "city": "Lyon", "trousers": 13, "skirts": 33, "dresses": 12, "bracelets": 0, "rings": 17 },
      { "city": "Vancouver", "trousers": 82, "skirts": 91, "dresses": 18, "bracelets": 96, "rings": 72 },
      { "city": "Cairn", "trousers": 64, "skirts": 43, "dresses": 14, "bracelets": 95, "rings": 55 },
  ]
  

  Нижний колонтитул

  • Элемент tfoot определяет нижний колонтитул.
  • Как и в заголовке, для перебора данных table.customFooter используется x-for.
  • Однако нижний колонтитул может отображать динамические значения, ссылаясь на свойства в table.footerData с помощью x-html.

  customFooter: [
      [
          { value: 'Total', class: 'font-bold border-r text-center', attr: { rowspan: 2 } },
          { name: 'total-trousers', class: 'text-right border-r' },
          { name: 'total-skirts', class: 'text-right border-r', },
          { name: 'total-dresses', class: 'text-right border-r' },
          { name: 'total-bracelets', class: 'text-right border-r' },
          { name: 'total-rings', class: 'text-right' },
      ],
      [
          { name: 'total-clothes', class: 'text-center border-r', attr: { colspan: 3 } },
          { name: 'total-accessories', class: 'text-center', attr: { colspan: 2 } },
      ],
  ],
  

  Пример данных:

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

  Дополнительные замечания:

  • Стилизация достигается с помощью классов CSS, определенных в свойствах col.class и data.class.
  • По предоставленной ссылке представлена ​​полная рабочая демо-версия для дальнейшего изучения.

  Внешние ссылки

  1. Демо: https://framework.fuwafuwa.web.id/examples/simple-table
  2. Объяснение: https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

  Заключение:

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