首页 >web前端 >js教程 >如何向 Astro 网站添加类似 Excel 的表格（简单方法）

如何向 Astro 网站添加类似 Excel 的表格（简单方法）

Patricia Arquette原创: 2024-10-23 08:26:02952浏览

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

上一篇：Fundamentos de Operadores下一篇：What\'s the Difference Between \"Change\" and \"Input\" Events for Input Elements?

查看更多