如何為 Astro 網站新增類似 Excel 的表格（簡單方法）-js教程-PHP中文網

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

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

初始設定 - 安裝 Astro

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

npm create astro@latest

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

初始設定 - 包括 ZingGrid 庫

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

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

登入後複製

建立活動追蹤器網格

我們將從我們可以製作的最簡單的網格開始，並從那裡開始構建。首先，我們在 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} />
  </main>
</Layout>

登入後複製

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

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

新增使用者控制項和標題

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

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

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

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

登入後複製

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

設定列格式

距離列沒有任何單位會使它有點難以閱讀。幸運的是，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} />
  </main>
</Layout>

登入後複製

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

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

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

登入後複製

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

動態新增類別到行

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

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

登入後複製

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

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

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

登入後複製

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

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

最後的想法

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

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