简体中文（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:02863浏览

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?

相关文章

查看更多