Cara Menambah Jadual seperti Excel pada Tapak Astro Anda (Cara Mudah)

Falsafah Astro ialah prestasi, fleksibiliti dan penyesuaian. Rangka kerja web yang berbangga dengan memaparkan seberapa banyak yang boleh pada pelayan terlebih dahulu, membolehkan anda memilih tempat kandungan anda berada, dan memberi anda seberapa banyak pengendalian yang mungkin untuk menyesuaikannya mengikut keinginan anda. Pustaka datagrid yang anda gunakan mestilah sama.

Persediaan Awal - Memasang Astro

Perkara pertama dahulu, kita perlu menyediakan apl asas—kita akan melakukannya dengan mengikut gesaan dalam arahan berikut

npm cipta astro@terkini

Persediaan Awal - Termasuk Perpustakaan ZingGrid

Perpustakaan itu sendiri harus disertakan sebagai skrip di bahagian hadapan (sebaik-baiknya ditangguhkan menggunakan penangguhan) atas beberapa sebab:

• Ia perlu disertakan sekali sahaja
• Walaupun perpustakaan itu sendiri kecil untuk jumlah helaian ciri yang dimuatkan (~259kb dimampatkan), ia terlalu besar untuk diselaraskan dalam HTML dan mengekalkan RAIL
  • Nota sampingan ringkas: arahan is:inline dalam Astro benar-benar bermaksud untuk menarik diri skrip daripada sebarang penggabungan dan pemprosesan, bukannya skrip sebenarnya akan diambil dan ditukar pada tempatnya semasa proses binaan
• Penyatuan langsung tidak diperlukan kerana ZingGrid telah pun dibina dengan falsafah yang serupa dengan Astro dalam fikiran

src/layouts/Layout.astro

<!-- ... --->



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

Mencipta Grid Penjejak Aktiviti

Kita akan mulakan dengan grid paling mudah yang boleh kita buat dan bina dari sana. Perkara pertama dahulu, kami mencipta komponen ActivityGrid.astro dalam direktori src/komponen kami dan menambah kod berikut.

Kami akan menghantar data kami kepada komponen ini, jadi kami membuat prop untuk itu dan kami menyerahkannya kepada menggunakan atribut data.

src/components/ActivityGrid.astro

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

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

Di halaman index.astro kami dalam src/pages, kami perlu menambah grid kami pada halaman tersebut. Untuk melakukan ini, kami perlu mengimport komponen terlebih dahulu dalam frontmatter kami (dipagar oleh ---), dan kami juga perlu memasukkan sampel JSON kami. Kini satu-satunya perkara yang perlu kita berhati-hati ialah kita menyelaraskan JSON kerana ia akan dihantar ke sebagai atribut.

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}"></activitygrid>
  </main>
</layout>

Apabila kami memuatkan halaman, kami akan melihat grid yang kelihatan seperti ini. Tiada apa-apa yang mewah lagi, tetapi sangat mudah untuk melakukan sesuatu.

Menambah Kawalan Pengguna dan Kapsyen

Untuk meningkatkan grid kami, kami akan mulakan dengan mengkonfigurasi elemen kami. Dengan 100 atribut untuk dipilih daripada elemen mempunyai banyak konfigurasi yang tersedia untuknya, tetapi saya akan memilih beberapa yang saya fikir akan berguna kepada kita di sini:

• susun atur : Menentukan sama ada grid ditunjukkan dalam mod baris atau kad
• layout-controls : Benarkan / halang pengguna daripada menukar mod susun atur
• isihan : Tambahkan kawalan untuk mengisih setiap lajur
• pager : Menghitamkan grid dan bukannya meninggalkannya sebagai satu senarai panjang
• page-sizer : Bilangan baris untuk setiap halaman

Kami juga akan menambah dalam supaya kami boleh memberi tajuk kepada grid kami

<!-- ... --->



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

Memformat Lajur

Mempunyai lajur Jarak tanpa sebarang unit menjadikannya agak sukar untuk dibaca. Nasib baik ZingGrid membenarkan kami membuat templat untuk lajur kami. Kami boleh mengakses nilai dari entri baris kami menggunakan objek indeks di dalam tatatanda [[double bracket]]. Di bawah ialah contoh rupa data kami untuk rujukan, kunci "jarak" ialah perkara yang kami tarik apabila kami menulis [[index.distance]] dalam templat.

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}"></activitygrid>
  </main>
</layout>

Dan hasilnya ialah unit mi ditambah pada setiap nilai Jarak sama seperti dalam templat kami

Menggayakan Grid dengan CSS Vars dan Open Props

ZingGrid dibina dengan komponen web asli moden untuk prestasi dan daya tahan, tetapi sebagai kesan sampingan daripada itu banyak komponen wujud dalam Shadow DOMs. Masih mahu membenarkan pengguna menggayakan mana-mana bahagian yang mereka inginkan, ratusan Pembolehubah CSS telah dicipta untuk menembusi bayang-bayang ini. Di bawah ini kami menunjukkan cara ia boleh digunakan bersama Open Props untuk fleksibiliti tambahan.

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

Fungsi Pemberian Sel Tersuai

Untuk menambahkan sedikit kehidupan tambahan pada grid kami adalah bagus untuk dapat menambahkan emoji secara dinamik di hadapan setiap aktiviti. Untuk melakukan ini, kami akan mencipta fungsi yang dipanggil activityRender pada objek tetingkap (supaya ia boleh diakses oleh ZingGrid) dan menambah tentukan nama fungsi atribut pemapar untuk kami ingin menerapkannya. Di dalam fungsi ini kita akan menghantar teks rekod kepada kita yang kemudiannya boleh kita ubah suai sebelum ia dimasukkan ke dalam sel.

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

Menambah Kelas secara Dinamik pada Baris

Dan akhirnya untuk mewarnai setiap baris berdasarkan jenis aktiviti, kita boleh menggunakan atribut kelas baris untuk menghantar fungsi yang akan menambah kelas secara dinamik pada setiap baris.

<!-- ... --->



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

Kami kemudiannya perlu mencipta kelas tersebut dalam blok gaya CSS global kerana s dicipta secara dinamik pada bahagian hadapan dan dengan itu tidak ditandakan dengan yang biasa atribut skop gaya yang Astro tambahkan pada masa binaan.

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

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

Et Voilà! ? Kami mempunyai ZingGrid yang digayakan dan diformat secara dinamik di dalam Astro

Fikiran Akhir

Dengan hanya sedikit konfigurasi dan kod yang sangat sedikit, kami dapat membina grid data yang mantap dan dinamik yang sesuai dengan tapak Astro kami. Kami hanya menconteng permukaan tentang perkara yang boleh dilakukan oleh ZingGrid dalam artikel ini, jadi akan ada bahagian 2 kemudian untuk menunjukkan perkara yang benar-benar boleh dilakukan oleh perpustakaan, jadi perhatikan perkara itu di sini jika anda berminat.

Atas ialah kandungan terperinci Cara Menambah Jadual seperti Excel pada Tapak Astro Anda (Cara Mudah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!