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.
Das Wichtigste zuerst: Wir müssen eine Basis-App einrichten – dazu folgen wir den Anweisungen im folgenden Befehl
npm create astro@latest
Die Bibliothek selbst sollte aus mehreren Gründen als Skript in das Frontend eingebunden werden (vorzugsweise mit „defer“ verzögert):
<!-- ... --->
<!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 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
---
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
---
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.
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:
Wir fügen außerdem eine
<!-- ... --->
<!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>
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.
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
---
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
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>
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
[
{
"activityType": "Outdoor Bike",
"city": "Tempe",
"date": "10/17/24",
"distance": "48.27",
"elapsedTime": "03:26:35",
"movingTime": "01:53:15",
"state": "Arizona"
},
/* ... */
]
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
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
Et Voilà! ? Wir haben ein dynamisch gestaltetes und formatiertes ZingGrid innerhalb von Astro
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!
Lösung dafür, dass Google Chrome nicht funktioniert
Der Unterschied zwischen Header-Dateien und Quelldateien
CDN-Server-Sicherheitsschutzmaßnahmen
Einführung in den Standort des Win10-Bedienfelds
virtuelle digitale Währung
Verwendung der Sortierfunktion sortieren
Zusammenfassung der Java-Grundkenntnisse
So löschen Sie ein Verzeichnis unter LINUX
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
