interface Web
js tutoriel
Comment ajouter un tableau de type Excel à votre site Astro (en toute simplicité)
Comment ajouter un tableau de type Excel à votre site Astro (en toute simplicité)
La philosophie d'Astro est basée sur la performance, la flexibilité et la personnalisation. Un framework Web qui se targue de restituer autant que possible sur le serveur en premier, vous permettant de choisir où se trouve votre contenu et vous donnant autant de poignées que possible pour le personnaliser comme vous le souhaitez. La bibliothèque de grilles de données que vous utilisez devrait être la même.
Configuration initiale - Installation d'Astro
Tout d'abord, nous devons configurer une application de base. Nous le ferons en suivant les invites de la commande suivante
npm créer astro@latest
Configuration initiale - Y compris la bibliothèque ZingGrid
La bibliothèque elle-même doit être incluse en tant que script dans le front-end (de préférence différée à l'aide de defer) pour plusieurs raisons :
- Il doit être inclus exactement une fois
- Bien que la bibliothèque elle-même soit petite pour le volume de fonctionnalités qu'elle contient (~259 Ko compressé), elle est trop volumineuse pour être intégrée dans le HTML et maintenir RAIL.
- Remarque rapide : la directive is:inline dans Astro signifie en réalité de retirer le script de tout regroupement et traitement, non pas que le script sera réellement récupéré et échangé pendant le processus de construction
- Une intégration directe n'est pas nécessaire car ZingGrid a déjà été construit avec une philosophie similaire à Astro
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>
Création de la grille de suivi d'activité
Nous commencerons par la grille la plus simple que nous puissions créer et construire à partir de là. Tout d’abord, nous créons un composant ActivityGrid.astro dans notre répertoire src/components et ajoutons le code suivant.
Nous allons transmettre nos données à ce composant, nous créons donc un accessoire pour cela, et nous le transmettons à
src/components/ActivityGrid.astro
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
Dans notre page index.astro dans src/pages, nous devons ajouter notre grille à la page. Pour ce faire, nous devrons d'abord importer le composant dans notre frontmatter (clôturé par ---), et nous devrons également extraire notre exemple JSON. Maintenant, la seule chose à laquelle nous devons faire attention est de chaîner le JSON tel qu'il sera transmis dans
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>
Lorsque nous chargerons la page, nous verrons une grille qui ressemble à ceci. Rien d'extraordinaire pour l'instant, mais étonnamment facile de faire avancer quelque chose.
Ajout de contrôles utilisateur et d'une légende
Pour améliorer notre grille, nous allons commencer par configurer notre élément. Avec 100 attributs parmi lesquels choisir, l'élément dispose d'une tonne de configurations, mais j'en choisirai quelques-uns qui, je pense, nous seront utiles ici :
- layout : Détermine si la grille est affichée ou non en mode ligne ou carte
- layout-controls : Autoriser/empêcher les utilisateurs de modifier le mode de mise en page
- sort : Ajouter des contrôles pour trier chaque colonne
- pager : Pagine la grille au lieu de la laisser comme une longue liste
- page-sizer : Le nombre de lignes pour chaque page
Nous ajouterons également un
<!-- ... --->
<!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>
Formatage des colonnes
Avoir une colonne Distance sans aucune unité la rend un peu difficile à lire. Heureusement, ZingGrid nous permet de créer des modèles pour nos colonnes. Nous pouvons accéder aux valeurs de notre entrée de ligne en utilisant l'objet index à l'intérieur de la notation [[double crochet]]. Vous trouverez ci-dessous un exemple de ce à quoi ressemblent nos données à titre de référence, la clé "distance" est ce que nous récupérons lorsque nous écrivons [[index.distance]] dans le modèle.
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>
Et le résultat est que l'unité mi est ajoutée à chaque valeur de distance comme dans notre modèle
Styliser la grille avec des variables CSS et des accessoires ouverts
ZingGrid est construit avec des composants Web natifs modernes pour plus de performances et de résilience, mais comme effet secondaire, de nombreux composants existent dans les Shadow DOM. Voulant toujours permettre aux utilisateurs de styliser n'importe quelle partie de leur choix, des centaines de variables CSS ont été créées pour percer ces ombres. Ci-dessous, nous montrons comment ils peuvent être utilisés conjointement avec Open Props pour plus de flexibilité.
---
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>
Fonctions de rendu de cellule personnalisé
Pour ajouter un peu de vie supplémentaire à notre grille, ce serait bien de pouvoir ajouter dynamiquement un emoji devant chaque activité. Pour ce faire, nous allons créer une fonction appelée ActivityRender sur l'objet window (pour qu'il soit accessible à ZingGrid) et ajouter le nom de la fonction à l'attribut de rendu pour l'attribut
[
{
"activityType": "Outdoor Bike",
"city": "Tempe",
"date": "10/17/24",
"distance": "48.27",
"elapsedTime": "03:26:35",
"movingTime": "01:53:15",
"state": "Arizona"
},
/* ... */
]
Ajout dynamique de classes aux lignes
Et puis enfin, pour colorer chaque ligne en fonction du type d'activité, nous pouvons utiliser l'attribut row-class pour passer une fonction qui ajoutera dynamiquement une classe à chaque ligne.
<!-- ... --->
<!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>
Nous devrons ensuite créer ces classes dans un bloc de style CSS global car les
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
Et voilà ! ? Nous avons un ZingGrid stylisé et formaté de manière dynamique à l'intérieur d'Astro
Pensées finales
Avec juste un peu de configuration et très peu de code, nous avons pu construire une grille de données robuste et dynamique adaptée à notre site Astro. Nous n'avons fait qu'effleurer la surface de ce que ZingGrid peut faire dans cet article, il y aura donc une partie 2 plus tard pour montrer ce que la bibliothèque peut vraiment faire, alors faites attention à cela ici si vous êtes intéressé.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1673
14
1429
52
1333
25
1278
29
1257
24
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation
Apr 16, 2025 am 12:12 AM
Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.
Javascript et le web: fonctionnalité de base et cas d'utilisation
Apr 18, 2025 am 12:19 AM
Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.
JavaScript en action: Exemples et projets du monde réel
Apr 19, 2025 am 12:13 AM
L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.
Comprendre le moteur JavaScript: détails de l'implémentation
Apr 17, 2025 am 12:05 AM
Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.
Python vs JavaScript: communauté, bibliothèques et ressources
Apr 15, 2025 am 12:16 AM
Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.
Python vs JavaScript: environnements et outils de développement
Apr 26, 2025 am 12:09 AM
Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.
Le rôle de C / C dans les interprètes et compilateurs JavaScript
Apr 20, 2025 am 12:01 AM
C et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.
Python vs JavaScript: cas d'utilisation et applications comparées
Apr 21, 2025 am 12:01 AM
Python est plus adapté à la science et à l'automatisation des données, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python fonctionne bien dans la science des données et l'apprentissage automatique, en utilisant des bibliothèques telles que Numpy et Pandas pour le traitement et la modélisation des données. 2. Python est concis et efficace dans l'automatisation et les scripts. 3. JavaScript est indispensable dans le développement frontal et est utilisé pour créer des pages Web dynamiques et des applications à une seule page. 4. JavaScript joue un rôle dans le développement back-end via Node.js et prend en charge le développement complet de la pile.
