使用 Alpine JS 建立動態表

本文探討了使用輕量級 JavaScript 框架 Alpine JS 建立動態表。我們將把這個過程分為三個部分：頁首、正文和頁腳，重點放在基本場景和複雜場景。

設定:

1. HTML 結構： 我們從附加了 x-data 指令的基本 HTML 元素 () 開始。該指令將反應資料綁定到元素。
2. JavaScript 資料： 我們在 HTML 外部定義一個空的 JavaScript 物件（資料）來保存表格資料。

初始程式碼如下：


<div x-data="data">
</div>

<script>
let data = {
}
</script>

登入後複製

標頭

• 我們使用 thead 元素作為標題。
• x-for 指令迭代 table.customHeader 數據，動態建立行和列。
• 複雜的標題可以利用 colspan 和 rowspan 屬性（在 col.attr 中定義）來合併儲存格。
• 每個單元格內的內容使用 x-html 顯示並綁定到 col.title 屬性。

<thead class="sticky top-0 z-10 text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
  <template x-for="row in table.customHeader">
    <tr>
        <template x-for="col in row">
            <th class="px-4 font-semibold text-left border-b py-1.5"
                x-init="col.attr && Object.keys(col.attr).forEach(e => $el.setAttribute(e, col.attr[e]))">
                <div class="flex items-center justify-center">
                    <span x-html="col.title" class="whitespace-nowrap"></span>
                </div>
            </th>
        </template>
    </tr>
  </template>
</thead>

登入後複製

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 元素保存表格的資料行。
• 我們使用 x-for 來迭代 table.data。
• 每行包含單元格 ()，其中使用 x 文字填入來自對應物件屬性的資料。

<tbody>
    <template x-for="(row, idx) in table.data">
        <tr class="border-b dark:border-gray-700">
            <template x-for="(col, icol) in row.columns">
                <td x-bind:class="{ [col.class]: !!col.class }" class="px-3 border-b border-gray-200">
                    <div x-text="col.text"></div>
                </td>
            </template>
        </tr>
    </template>
</tbody>

登入後複製

這是我們要顯示的資料：


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 元素定義頁尾。
• 與 header 類似，它使用 x-for 來迭代 table.customFooter 資料。
• 但是，頁腳可以透過使用 x-html 來引用 table.footerData 中的屬性來顯示動態值。

<tfoot class="sticky bg-gray-100 -bottom-1">
    <template x-for="row in table.customFooter">
        <tr>
            <template x-for="col in row">
                <td class="px-3 border-b border-gray-200"
                    x-init="col.attr && Object.keys(col.attr).forEach(e => $el.setAttribute(e, col.attr[e]))">
                        <div x-html="table.footerData[col.name)">
                        </div>
                </td>
            </template>
        </tr>
    </template>
</tfoot>

登入後複製

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 } },
    ],
],

登入後複製

範例資料：

我們使用包含城市名稱和各種服裝的範例資料來示範了該表的功能。

附加說明：

• 樣式是使用 col.class 和 data.class 屬性中定義的 CSS 類別來實現的。
• 提供的連結提供了完整的工作演示，供進一步探索。

外部連結

1. 示範： https://framework.fuwafuwa.web.id/examples/simple-table
2. 說明： https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

結論：

此細分展示了 Alpine JS 如何幫助我們建立具有彈性頁眉、正文和頁腳的動態表格。這種方法簡化了表的創建和管理，特別是對於資料頻繁變化的場景。

以上是使用 Alpine JS 建立動態表的詳細內容。更多資訊請關注PHP中文網其他相關文章！