简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  如何為 Astro 網站新增類似 Excel 的表格（簡單方法）

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

Patricia Arquette
Patricia Arquette原創
2024-10-23 08:26:02868瀏覽

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

json css html npm Object if sort for while Directory double using class finally Attribute number function this column table Access excel
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：運算符基礎知識下一篇：運算符基礎知識

相關文章

看更多