使用 Grid.js 创建下一代 HTML 表格。😎

在本教程中，你将学习如何借助 JavaScript 生态系统中一个相当新的库Grid.js来创建功能强大的表格。最棒的是？它非常易于集成，功能强大，可以异步获取数据，并且可以按照你想要的方式设置样式！这绝对是新一代的杰作，对吧？

为什么选择 Grid.js？🤨

它比其他产品更好的原因在于：

1. 上手超级简单！
   我花了几分钟就完成了下面的演示。它已经自带了一些非常实用的工具，可以轻松集成到现有应用中。所以，你完全不用担心学习另一个新的库。

2. 无论是否使用任何框架，它都能轻松使用：
   它内置了一个外部依赖项。因此，即使不使用 NPM 之类的包管理器，也无需担心依赖项的管理。您可以将其与 Angular、React、Vue 或原生 JS 一起使用！

3. React Native 支持（即将推出）：
   它被设计为独立于 Web 浏览器环境，并且库开发人员已声明即将推出对 RN 的支持！

4. 快！
   Grid.js 有一个内部管道，负责缓存和处理数据。这有助于快速加载、搜索、排序或显示数据。

5. 强大的 CSS 集成：
   您可以随心所欲地设置表格样式。无论您是在单独的样式表中使用普通的 CSS，还是在 JS 中使用，都没关系😏。

我们将使用 Grid.js 做什么？😀

这：

如您所见，我们将介绍以下功能：

• 添加“正在加载...”状态。
• 显示数据。
• 对每一行或多行进行排序。
• 正在搜索内容。
• 添加分页。
• 使用自定义 CSS 样式。
• 添加内部化。

让我们在几分钟内制作出这张强大的表格！⚡

步骤 1️⃣：获取 CDN

在本演示中，我们将使用快速安装 cdn 的方法安装 Grid.js！此外，这是一个原生 JS 项目，我们将使用这个库。

在index.html文件中添加以下内容：

<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

这包括 Grid.js 样式。对于 JS，请使用以下命令导入库：

<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js">

第 2️⃣ 步：赋予其结构和初始样式

从 HTML 开始。只有 22 个字符！（是的，我确实数过这个数字 🥴）因为我们只显示div表格的放置位置。

<div id="table"></div>

轰！接下来……

步骤 3️⃣：编写表格

gridjs在 JS 文件中实例化该对象：

new gridjs.Grid({})

该gridjs对象包含与我们的表所需的所有配置：

• data：我们在这里定义表格的行和列。在这个演示中，我们从mockaroo.com中选择了一个示例数据。但在添加数据之前，我们需要告诉 Grid.js 我们需要在哪个 HTML 元素上显示这些数据。因此，我们使用了render()方法，table通过常规document.getElementById()调用来选择元素。

new gridjs.Grid({}).render(document.getElementById("table"));

Grid.js 不仅以数组形式存储数据[key: string]，还以数组的形式存储数据[string, string]。这里我们使用后者。只需在此处将示例数据以字符串形式添加即可。为了明确定义列的标题，只需添加以下配置……

• columns：这些是可选的，并定义为string[]类型。因此，我们添加columns: ["Name", "Email", "Phone Number","Gender"]。

• Promise异步解析数据：这对于任何外部 HTTP 调用以及从服务器加载数据都非常有用。此外，如果您setTimeout()在此异步调用中添加一个函数，您将获得所需的闪烁（加载中……）效果，如演示中所示。在这里，我设置了 2 秒的延迟，以模拟数据获取。

现在，我们的data()配置变成：

data: () => {
    return new Promise(resolve => {
      setTimeout(() =>
        resolve([
          ["Dirk", "dborkett0@com.com", "(646) 3432270", "Male"],
          ["Maryl", "mchampkins1@dailymail.co.uk", "(980) 3335235", "Female"],
          ["Stefan", "sbrawson2@smh.com.au", "(180) 3533257", "Male"],
          ["Stephanie", "scouronne4@storify.com", "(904) 5358792", "Female"],
          ["Emeline", "esooley5@cyberchimps.com", "(308) 6561908", "Female"],
          ["Gavra", "gkrout9@foxnews.com", "(383) 4909639", "Female"],
          ["Roxi", "rvillage1@businessweek.com", "(980) 3335235", "Male"],
          ["Jamey", "jsheringham0@rakuten.co.jp", "(773) 5233571", "Male"],
          ["Maye", "mambrosoni8@prweb.com", "(895) 9997017", "Female"]
        ]), 2000);
    });
  }

现在，这些数据应该已经显示在网页上一个漂亮的表格里了。现在该添加其他功能了！

添加搜索和排序功能相当容易。只需将以下两个配置项设置为布尔值即可true：

search: true,
sort: true

如果数据量很大，我们肯定需要分页功能。为此，Grid.js 提供了一个pagination对象，我们可以在其中设置limit一次显示多少行数据。更酷的是，它会自动为我们添加分页控件！

pagination: {
    limit: 3
},

要进一步控制表格的默认高度，请将配置设置height为像素值。例如：height: '200px'

您在表格中看到的所有信息，例如带有表情符号的搜索占位符、“显示 9 条记录中的 1 至 3 条”等等，都得益于该库的语言支持。它为我们提供了language配置，我们可以在其中传递哪些文本数据来更改位置。

因此，如果您想更改'search'框的占位符文本，只需将其作为字符串对象添加到language，对 也一样'pagination'。这是我们language现在的对象：

language: {
    'search': {
      'placeholder': '🔍 Search name, email...'
    },
    'pagination': {
      'previous': '⬅️',
      'next': '➡️',
      'showing': '👓 Displaying',
      'results': () => 'Records'
    }
  }

最后，如果您想添加一些自定义 CSS 类，我们提供了className配置。要对您的 进行任何更改table，只需将相应的自定义类名以字符串形式添加即可，例如：

className: {
    table: 'table-body'
}

现在，在您的 CSS 文件中，table-body使用您需要添加的样式定义新创建的类。

完成了！🥳

如果您在代码中遇到困难或者只是想查看输出，我已在下面嵌入了 Pen：

下一步去哪里？🤔

您只是对 Grid.js 有了些许了解。它是一个相对较新的库。现在，您可以尝试以下操作来进一步了解它：

• 将其与您现有的React、Vue或（如果您在 2020 年仍在使用它🙃）jQuery集成。

• 研究或编写一个新的插件。

• 导入服务器端数据，添加CSS-in-JS 支持并了解更多！

• 最后，支持开发人员并为其存储库做出贡献！

谢谢阅读，我非常感激！祝你拥有美好的一天。(✿◕‿◕✿)

#codeFlaw #developer #machinLearning #programming RT @msdevUK : “它能用吗？”

“能，但是-”

“发货！”

图片来源：https://t.co/Y0r8DZDEBK #DevHumour #Developer pic.twitter.com/PRCmIeLsCo

— CodeFlaw (@CodeFlawCo) 2020 年 4 月 2 日

📫 订阅我的每周开发者新闻通讯 📫

每日在每个新标签页发布最棒的编程新闻。我们将为您筛选数百个优质来源，助您掌控未来。