In diesem Artikel geht es um die Erstellung dynamischer Tabellen mit Alpine JS, einem leichten JavaScript-Framework. Wir werden den Prozess in drei Abschnitte unterteilen: Kopfzeile, Hauptteil und Fußzeile, wobei wir uns sowohl auf grundlegende als auch auf komplexe Szenarios 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:


Header

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

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

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.

  Und das sind die Daten, die wir anzeigen möchten:
  

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

  Fusszeile

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

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

  Beispieldaten:

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

  Zusätzliche Bemerkungen:

  • 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. Erläuterung: 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.