Heim > Artikel > Web-Frontend > So fügen Sie Ihrer Astro-Site eine Excel-ähnliche Tabelle hinzu (auf einfache Weise)

So fügen Sie Ihrer Astro-Site eine Excel-ähnliche Tabelle hinzu (auf einfache Weise)

Patricia ArquetteOriginal: 2024-10-23 08:26:02868Durchsuche

Die Philosophie von Astro ist Leistung, Flexibilität und Anpassung. Ein Web-Framework, das stolz darauf ist, so viel wie möglich zuerst auf dem Server zu rendern, sodass Sie auswählen können, wo Ihre Inhalte gespeichert werden, und Ihnen so viele Handles wie möglich zur Verfügung stellen, um sie nach Ihren Wünschen anzupassen. Die von Ihnen verwendete Datagrid-Bibliothek sollte dieselbe sein.

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Ersteinrichtung – Astro installieren

Das Wichtigste zuerst: Wir müssen eine Basis-App einrichten – dazu folgen wir den Anweisungen im folgenden Befehl

npm create astro@latest

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Ersteinrichtung – inklusive ZingGrid-Bibliothek

Die Bibliothek selbst sollte aus mehreren Gründen als Skript in das Frontend eingebunden werden (vorzugsweise mit „defer“ verzögert):

Es muss genau einmal enthalten sein
Während die Bibliothek selbst für das Blattvolumen der darin enthaltenen Funktionen klein ist (~259 KB komprimiert), ist sie zu groß, um in den HTML-Code eingebunden zu werden und RAIL zu verwalten
- Kurze Randbemerkung: Die is:inline-Direktive in Astro bedeutet wirklich, das Skript von jeglicher Bündelung und Verarbeitung auszuschließen, nicht, dass das Skript während des Build-Prozesses tatsächlich abgerufen und an Ort und Stelle ausgetauscht wird
Eine direkte Integration ist nicht erforderlich, da ZingGrid bereits mit einer ähnlichen Philosophie wie Astro entwickelt wurde

src/layouts/Layout.astro

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="generator" content={Astro.generator} />
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>

Erstellen des Aktivitäts-Tracker-Rasters

Wir beginnen mit dem einfachsten Raster, das wir erstellen können, und bauen von dort aus auf. Als Erstes erstellen wir eine ActivityGrid.astro-Komponente in unserem Verzeichnis src/components und fügen den folgenden Code hinzu.

Wir werden unsere Daten an diese Komponente weitergeben, also erstellen wir eine Requisite dafür und übergeben sie an unter Verwendung des Datenattributs.

src/components/ActivityGrid.astro

---
const { data } = Astro.props;
---

<zing-grid data={data}></zing-grid>

Drüben auf unserer index.astro-Seite in src/pages müssen wir der Seite unser Raster hinzufügen. Dazu müssen wir zunächst die Komponente in unseren Frontmatter importieren (abgegrenzt durch ---) und auch unser Beispiel-JSON importieren. Das Einzige, worauf wir jetzt achten müssen, ist, dass wir den JSON-Code stringisieren, da er an übergeben wird. als Attribut.

src/pages/index.astro

---
import Layout from '../layouts/Layout.astro';
import ActivityGrid from '../components/ActivityGrid.astro';

import activityData from '../data/activities.json';
const activityDataStr = JSON.stringify(currencyData);
---

<Layout title="ZingGrid + Astro">
  <header> <!-- ... --> </header>
  <main>
    <ActivityGrid data={activityDataStr} />
  </main>
</Layout>

Wenn wir die Seite laden, sehen wir ein Raster, das so aussieht. Noch nichts Besonderes, aber überraschend einfach, etwas in Gang zu bringen.

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Hinzufügen von Benutzersteuerelementen und einer Beschriftung

Um unser Raster zu erweitern, beginnen wir mit der Konfiguration unseres Elements. Mit 100 Attributen zur Auswahl steht dem Element eine Menge Konfigurationsmöglichkeiten zur Verfügung, aber ich werde ein paar herausgreifen, von denen ich denke, dass sie für uns hier nützlich sein werden:

Layout: Legt fest, ob das Raster im Zeilen- oder Kartenmodus angezeigt wird
Layout-Controls: Benutzern erlauben/verhindern, den Layoutmodus zu ändern
Sortieren: Fügen Sie Steuerelemente hinzu, um jede Spalte zu sortieren
pager: Paginiert das Raster, anstatt es als eine lange Liste zu belassen
Seitengröße: Die Anzahl der Zeilen für jede Seite

Wir fügen außerdem eine innerhalb unseres damit wir unserem Raster einen Titel geben können

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="generator" content={Astro.generator} />
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Formatieren der Spalten

Wenn eine Distanzspalte keine Einheiten enthält, ist sie etwas schwer lesbar. Glücklicherweise ermöglicht uns ZingGrid die Erstellung von Vorlagen für unsere Spalten. Wir können auf die Werte aus unserem Zeileneintrag zugreifen, indem wir das Indexobjekt innerhalb der [[doppelten Klammer]]-Notation verwenden. Nachfolgend finden Sie ein Beispiel dafür, wie unsere Daten als Referenz aussehen. Der Schlüssel „Entfernung“ ist das, was wir abrufen, wenn wir [[index.distance]] in die Vorlage schreiben.

src/data/activities.json

---
const { data } = Astro.props;
---

<zing-grid data={data}></zing-grid>

src/data/ActivityGrid.astro

---
import Layout from '../layouts/Layout.astro';
import ActivityGrid from '../components/ActivityGrid.astro';

import activityData from '../data/activities.json';
const activityDataStr = JSON.stringify(currencyData);
---

<Layout title="ZingGrid + Astro">
  <header> <!-- ... --> </header>
  <main>
    <ActivityGrid data={activityDataStr} />
  </main>
</Layout>

Und das Ergebnis ist, dass die mi-Einheit zu jedem Entfernungswert hinzugefügt wird, genau wie in unserer Vorlage

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Gestalten Sie das Raster mit CSS-Variablen und offenen Requisiten

ZingGrid ist mit modernen nativen Webkomponenten für Leistung und Ausfallsicherheit aufgebaut, aber als Nebeneffekt davon sind viele der Komponenten in Shadow DOMs vorhanden. Um den Benutzern dennoch die Möglichkeit zu geben, jeden gewünschten Teil zu gestalten, wurden Hunderte von CSS-Variablen erstellt, um diese Schatten zu durchdringen. Nachfolgend zeigen wir, wie sie für zusätzliche Flexibilität in Verbindung mit Open Props verwendet werden können.

---
const { data } = Astro.props;
---

<zing-grid
  data={data}
  layout="row"
  layout-controls="disabled"
  sort
  pager
  page-size="6"
>
  <zg-caption>?? Activity Tracker</zg-caption>
</zing-grid>

Benutzerdefinierte Funktionen zum Rendern von Zellen

Um unserem Raster etwas mehr Leben einzuhauchen, wäre es schön, vor jeder Aktivität dynamisch ein Emoji hinzufügen zu können. Dazu erstellen wir eine Funktion namens „activityRender“ für das Fensterobjekt (damit ZingGrid darauf zugreifen kann) und fügen den Funktionsnamen als Renderer-Attribut für das -Objekt hinzu. wir wollen es anwenden. Innerhalb dieser Funktion wird uns der Datensatztext übergeben, den wir dann ändern können, bevor er in die Zelle eingefügt wird.

[
  {
    "activityType": "Outdoor Bike",
    "city": "Tempe",
    "date": "10/17/24",
    "distance": "48.27",
    "elapsedTime": "03:26:35",
    "movingTime": "01:53:15",
    "state": "Arizona"
  },
  /* ... */
]

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Dynamisches Hinzufügen von Klassen zu Zeilen

Und um schließlich jede Zeile basierend auf dem Aktivitätstyp einzufärben, können wir das row-class-Attribut verwenden, um eine Funktion zu übergeben, die jeder Zeile dynamisch eine Klasse hinzufügt.

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="generator" content={Astro.generator} />
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>

Wir müssen diese Klassen dann in einem globalen CSS-Stilblock erstellen, da die s dynamisch im Frontend erstellt werden und daher nicht mit den üblichen Tags versehen werden Stil-Scoping-Attribute, die Astro zur Erstellungszeit hinzufügt.

---
const { data } = Astro.props;
---

<zing-grid data={data}></zing-grid>

Et Voilà! ? Wir haben ein dynamisch gestaltetes und formatiertes ZingGrid innerhalb von Astro

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Letzte Gedanken

Mit nur wenig Konfiguration und sehr wenig Code konnten wir ein robustes und dynamisches Datenraster erstellen, das zu unserer Astro-Site passt. Wir haben in diesem Artikel nur an der Oberfläche dessen gekratzt, was ZingGrid leisten kann, deshalb wird es später Teil 2 geben, um zu zeigen, was die Bibliothek wirklich kann, also achten Sie hier darauf, wenn Sie interessiert sind.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Ihrer Astro-Site eine Excel-ähnliche Tabelle hinzu (auf einfache Weise). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json css html npm Object if sort for while Directory double using class finally Attribute number function this column table Access excel

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Operator-GrundlagenNächster Artikel：Operator-Grundlagen

In Verbindung stehende Artikel

Mehr sehen