Astro 的理念是性能、灵活性和定制化。一个 Web 框架，它以首先在服务器上尽可能多地渲染而自豪，允许您选择内容所在的位置，并为您提供尽可能多的句柄以按照您的喜好对其进行自定义。您使用的数据网格库应该是相同的。
首先，我们必须设置一个基本的应用程序 - 我们将按照以下命令中的提示进行操作
npm create astro@latest
库本身应该作为脚本包含在前端（最好使用 defer 来延迟），原因如下：
<!-- ... --->
<!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 组件并添加以下代码。
我们将把数据传递给这个组件，所以我们为此创建一个道具，然后将其交给
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
在 src/pages 中的 index.astro 页面中，我们需要将网格添加到页面中。为此，我们首先需要在 frontmatter 中导入组件（用 --- 隔开），并且还需要引入示例 JSON。现在我们唯一需要注意的是我们将 JSON 字符串化，因为它将被传递到
---
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>
当我们加载页面时，我们会看到一个如下所示的网格。还没有什么奇特的东西，但是令人惊讶的是很容易让事情发生。
为了增强我们的网格，我们将从配置我们的元素开始。该元素有 100 个属性可供选择，有大量可用的配置，但我会在这里挑选一些我认为对我们有用的配置：
我们还将添加一个
<!-- ... --->
<!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>
距离列没有任何单位会使它有点难以阅读。幸运的是，ZingGrid 允许我们为我们的列创建模板。我们可以使用 [[双括号]] 表示法内的索引对象来访问行条目中的值。下面是我们的数据示例供参考，“distance”键是我们在模板中写入 [[index.distance]] 时引入的内容。
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
---
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 单位添加到每个距离值，就像我们的模板中一样
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 可以访问它），并为
[
{
"activityType": "Outdoor Bike",
"city": "Tempe",
"date": "10/17/24",
"distance": "48.27",
"elapsedTime": "03:26:35",
"movingTime": "01:53:15",
"state": "Arizona"
},
/* ... */
]
最后，根据活动类型为每行着色，我们可以使用 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 样式块中创建这些类，因为
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
瞧！ ？我们在 Astro 中有一个动态样式和格式的 ZingGrid
只需很少的配置和很少的代码，我们就能够构建一个适合我们 Astro 网站的健壮且动态的数据网格。在本文中，我们只触及了 ZingGrid 功能的皮毛，因此稍后将有第 2 部分来展示该库的真正功能，所以如果您感兴趣，请留意这里。
以上是如何向 Astro 网站添加类似 Excel 的表格（简单方法）的详细内容。更多信息请关注PHP中文网其他相关文章！
