Dynamische Tabellenerstellung mit Alpine JS

In diesem Artikel geht es um die Erstellung dynamischer Tabellen mit Alpine JS, einem leichten JavaScript-Framework. Wir unterteilen den Prozess in drei Abschnitte: Kopfzeile, Hauptteil und Fußzeile, wobei wir uns sowohl auf grundlegende als auch auf komplexe Szenarien konzentrieren.

Einrichten:

1. HTML-Struktur: Wir beginnen mit einem grundlegenden HTML-Element () mit der angehängten x-data-Direktive. Diese Direktive bindet reaktive Daten an das Element.
2. JavaScript-Daten:Wir definieren ein leeres JavaScript-Objekt (Daten) außerhalb des HTML, um unsere Tabellendaten zu speichern.

Der ursprüngliche Code ist unten:


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

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

Nach dem Login kopieren

Kopfzeile

• Wir verwenden das thead-Element für den Header.
• Die x-for-Direktive iteriert über table.customHeader-Daten und erstellt dynamisch Zeilen und Spalten.
• Komplexe Header können die Attribute colspan und rowspan (definiert in col.attr) nutzen, um Zellen zusammenzuführen.
• Der Inhalt jeder Zelle wird mit x-html angezeigt und an die Eigenschaft col.title gebunden.

<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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Körper

• Das tbody-Element enthält die Datenzeilen der Tabelle.
• Wir durchlaufen table.data mit x-for.
• Jede Zeile enthält Zellen (), die mithilfe von X-Text mit Daten aus entsprechenden Objekteigenschaften gefüllt sind.

<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>

Nach dem Login kopieren

Und das sind die Daten, die wir zeigen wollen:


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

Nach dem Login kopieren

Fußzeile

• Das tfoot-Element definiert die Fußzeile.
• Ähnlich wie der Header verwendet er x-for, um die Daten von table.customFooter zu durchlaufen.
• Die Fußzeile kann jedoch dynamische Werte anzeigen, indem sie mithilfe von x-html auf Eigenschaften in table.footerData verweist.

<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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Beispieldaten:

Wir demonstrieren die Funktionalität der Tabelle anhand von Beispieldaten, die Städtenamen und verschiedene Kleidungsstücke enthalten.

Zusätzliche Hinweise:

• Der Stil wird mithilfe von CSS-Klassen erreicht, die in den Eigenschaften col.class und data.class definiert sind.
• Der bereitgestellte Link bietet eine voll funktionsfähige Demo zur weiteren Erkundung.

Externe Links

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

Abschluss:

Diese Aufschlüsselung zeigt, wie Alpine JS es uns ermöglicht, dynamische Tabellen mit flexiblen Kopf-, Text- und Fußzeilen zu erstellen. Dieser Ansatz vereinfacht die Tabellenerstellung und -verwaltung, insbesondere für Szenarien mit sich häufig ändernden Daten.

Das obige ist der detaillierte Inhalt vonDynamische Tabellenerstellung mit Alpine JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!