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

首頁

web前端

js教程

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

Patricia Arquette

Oct 23, 2024 am 08:26 AM

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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1657

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1229

Related knowledge

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。

JavaScript的演變：當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

JavaScript引擎：比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

JavaScript：探索網絡語言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

Python vs. JavaScript：學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

如何使用Next.js（前端集成）構建多租戶SaaS應用程序 Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

從C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

如何安裝JavaScript？ Apr 05, 2025 am 12:16 AM

JavaScript不需要安裝，因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中，通過標籤嵌入HTML文件中運行。 2)在Node.js環境中，下載並安裝Node.js後，通過命令行運行JavaScript文件。

See all articles

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

初始設定 - 安裝 Astro

初始設定 - 包括 ZingGrid 庫

src/layouts/Layout.astro

建立活動追蹤器網格

src/components/ActivityGrid.astro

src/pages/index.astro

新增使用者控制項和標題

設定列格式

src/data/activities.json

src/data/ActivityGrid.astro

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

自訂單元格渲染函數

動態新增類別到行

最後的想法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題