如何向 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中文网其他相关文章！