Cara Menambah Jadual seperti Excel pada Tapak Astro Anda (Cara Mudah)-tutorial js-php.cn

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.

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

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

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

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

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} />
  </main>
</Layout>

Salin selepas log masuk

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

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

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

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

Salin selepas log masuk

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

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

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

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>

Salin selepas log masuk

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"
  },
  /* ... */
]

Salin selepas log masuk

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

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.

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

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

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!