如何為 Astro 網站新增類似 Excel 的表格（簡單方法）

Astro 的理念是效能、靈活性和客製化。一個 Web 框架，它以首先在伺服器上盡可能多地渲染而自豪，允許您選擇內容所在的位置，並為您提供盡可能多的句柄以按照您的喜好對其進行自訂。您使用的資料網格庫應該是相同的。

初始設定 - 安裝 Astro

首先，我們必須設定一個基本的應用程式 - 我們將按照以下命令中的提示進行操作

npm create astro@latest

初始設定 - 包括 ZingGrid 庫

函式庫本身應該作為腳本包含在前端（最好使用 defer 來延遲），原因如下：

• 它需要只包含一次
• 雖然函式庫本身相對於它所包含的功能表體積來說很小（~259kb壓縮），但它太大了，無法內聯在 HTML 中並維護 RAIL
  • 快速旁注：Astro 中的 is:inline 指令實際上意味著選擇腳本不進行任何捆綁和處理，而不是在構建過程中實際提取並交換腳本
• 不需要直接集成，因為 ZingGrid 已經以與 Astro 類似的理念建構

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>

建立活動追蹤器網格

我們將從我們可以製作的最簡單的網格開始，並從那裡開始構建。首先，我們在 src/components 目錄中建立一個 ActivityGrid.astro 元件並新增以下程式碼。

我們將把資料傳遞給這個元件，所以我們為此創建一個道具，然後將其交給 ;使用資料屬性。

src/components/ActivityGrid.astro

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

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

在 src/pages 中的 index.astro 頁面中，我們需要將網格新增到頁面中。為此，我們首先需要在 frontmatter 中導入元件（用 --- 隔開），並且還需要引入範例 JSON。現在我們唯一需要注意的是我們將 JSON 字串化，因為它將被傳遞到 中。作為屬性。

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>

當我們載入頁面時，我們會看到一個如下所示的網格。還沒有什麼奇特的東西，但令人驚訝的是很容易讓事情發生。

新增使用者控制項和標題

為了增強我們的網格，我們將從配置我們的元素開始。該元素有 100 個屬性可供選擇，有大量可用的配置，但我會在這裡挑選一些我認為對我們有用的配置：

• layout : 決定網格是否以行模式或卡片模式顯示
• 佈局控制：允許/阻止使用者更改佈局模式
• sort ：新增控制項對每列進行排序
• pager ：對網格進行分頁，而不是將其保留為一個長列表
• page-sizer : 每頁的行數

我們也會加入一個 在我們的 內部這樣我們就可以給我們的網格一個標題

<!-- ... --->



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

設定列格式

距離列沒有任何單位會使它有點難以閱讀。幸運的是，ZingGrid 允許我們為我們的列建立模板。我們可以使用 [[雙括號]] 表示法內的索引物件來存取行條目中的值。以下是我們的資料範例供參考，「distance」鍵是我們在範本中寫入 [[index.distance]] 時引入的內容。

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>

結果是將 mi 單位加到每個距離值，就像我們的模板一樣

使用 CSS Vars 和 Open Props 設定網格樣式

ZingGrid 使用現代原生 Web 元件構建，以提高效能和彈性，但其副作用是許多元件存在於 Shadow DOM 中。仍然希望允許用戶設定他們想要的任何部分的樣式，因此創建了數百個 CSS 變數來穿透這些陰影。下面我們展示如何將它們與 Open Props 結合使用以增加靈活性。

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

自訂單元格渲染函數

為了在我們的網格上添加一些額外的生命，如果能夠在每個活動前面動態添加表情符號那就太好了。為此，我們將在視窗物件上建立一個名為 ActivityRender 的函數（以便 ZingGrid 可以存取它），並為 的 renderer 屬性新增指定函數名稱。我們想將它應用到。在此函數內，我們會將記錄文字傳遞給我們，然後我們可以在將其插入儲存格之前對其進行修改。

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

動態新增類別到行

最後，根據活動類型為每行著色，我們可以使用 row-class 屬性來傳遞函數，該函數將動態地向每行添加一個類別。

<!-- ... --->



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

然後，我們需要在global CSS 樣式區塊中建立這些類，因為 是在前端動態建立的，因此不會使用通常的標記Astro 在建置時新增的樣式範圍屬性。

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

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

瞧！ ？我們在 Astro 中有一個動態樣式和格式的 ZingGrid

最後的想法

只需很少的配置和很少的程式碼，我們就能夠建立一個適合我們 Astro 網站的健壯且動態的資料網格。在本文中，我們只觸及了 ZingGrid 功能的皮毛，因此稍後將有第 2 部分來展示該庫的真正功能，所以如果您感興趣，請留意這裡。

以上是如何為 Astro 網站新增類似 Excel 的表格（簡單方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！