Penciptaan Jadual Dinamik dengan Alpine JS

Artikel ini meneroka mencipta jadual dinamik menggunakan Alpine JS, rangka kerja JavaScript yang ringan. Kami akan membahagikan proses kepada tiga bahagian: pengepala, kandungan dan pengaki, memfokuskan pada kedua-dua senario asas dan kompleks.

Menyediakan:

1. Struktur HTML: Kami bermula dengan elemen HTML asas () dengan arahan x-data dilampirkan. Arahan ini mengikat data reaktif kepada elemen.
2. Data JavaScript: Kami mentakrifkan objek (data) JavaScript kosong di luar HTML untuk menyimpan data jadual kami.

Kod awal adalah di bawah:


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

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

Pengepala

• Kami menggunakan elemen iklan untuk pengepala.
• Arahan x-for berulang ke atas data table.customHeader, mencipta baris dan lajur secara dinamik.
• Pengepala kompleks boleh memanfaatkan atribut colspan dan rowspan (ditakrifkan dalam col.attr) untuk menggabungkan sel.
• Kandungan dalam setiap sel dipaparkan menggunakan x-html dan terikat pada sifat 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' },
          ]
      ],
  }
}

Badan

• Elemen tbody memegang baris data jadual.
• Kami lelaran melalui table.data menggunakan x-for.
• Setiap baris menempatkan sel (b6c5a531a458a2e790c1fd6421739d1c) yang diisi dengan data daripada sifat objek yang sepadan menggunakan teks-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>

Dan ini ialah data yang ingin kami tunjukkan:

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

Pengaki

• Elemen tfoot mentakrifkan footer.
• Sama seperti pengepala, ia menggunakan x-for untuk melelaran melalui data table.customFooter.
• Walau bagaimanapun, pengaki boleh memaparkan nilai dinamik dengan merujuk sifat dalam table.footerData menggunakan x-html.

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

Contoh Data:

Kami menunjukkan kefungsian jadual dengan data sampel yang mengandungi nama bandar dan pelbagai item pakaian.

Nota Tambahan:

• Penggayaan dicapai menggunakan kelas CSS yang ditakrifkan dalam sifat col.class dan data.class.
• Pautan yang disediakan menawarkan demo berfungsi penuh untuk penerokaan lanjut.

Pautan luar

1. Demo: https://framework.fuwafuwa.web.id/examples/simple-table
2. Penjelasan: https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

Kesimpulan:

Pecahan ini mempamerkan cara Alpine JS memperkasakan kami untuk mencipta jadual dinamik dengan pengepala, badan dan pengaki yang fleksibel. Pendekatan ini memudahkan penciptaan dan pengurusan jadual, terutamanya untuk senario dengan data yang kerap berubah.

Atas ialah kandungan terperinci Penciptaan Jadual Dinamik dengan Alpine JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!