65.9K
CodeProject 正在变化。 阅读更多。
Home

LibreGrid：在 5 分钟内集成到你的应用中，对自定义 JSON 数据进行 CRUD 操作

raddevus
starIconstarIconstarIconstarIconstarIcon

5.00/5 (4投票s)

2022 年 12 月 8 日

CPOL

11分钟阅读

viewsIcon

6867

将此 React 组件集成到你的应用中，在 5 分钟内即可实现对自定义数据的 CRUD 操作。

从我的 GitHub 仓库获取所有源代码： GitHub - raddevus/LibreGrid: 基于 React 的组件和示例代码，允许用户连接任何 JSON 数据集并在网格中编辑数据。[^]。

试一试

尝试本文中展示的实时版本，请访问我的网站： https://newlibre.com/LibreGrid/[^]。

YouTube 视频：从 SWAPI 加载数据

在文章的后面，我将展示如何从 Star Wars API 加载数据，但你现在就可以观看视频，了解 LibreGrid 的实际应用。

引言

几个月前，当我开始构建这个组件时，我不知道会花费这么长时间，所以我希望你能发现它像我一样有趣和有用。

LibreGrid 组件是我基于 React 构建的，它允许你查看、排序、搜索、编辑和生成自定义领域对象 (Domain Object(s)) 的 JSON。

使用要求

你必须有一个领域对象集合：你的领域对象必须包含在一个数组中。这是一种非常常见的格式，99% 的 WebAPI 都会使用这种格式，所以这应该不会给你带来任何麻烦。这意味着你的 JSON 将是以下格式：

// [ ] represents outer array
// each { } represents each domain object
[ 
  {
    "fake-prop": "fake-value 1"
  },
  {
    "fake-prop": "fake-value 2"
  }
]

信不信由你，仅仅使用这些简单的数据，我就可以向你展示加载 LibreGrid 并使用自定义数据的简便性。现在这可能看起来并不惊人，但当我加载自定义 WebAPI 的结果时，我相信你会惊叹不已。我希望如此。

让我向你展示 LibreGrid 的使用有多么简单

现在，对于喜欢快速学习的人来说，我将向你展示如何轻松地使用我的 LibreGrid 组件。

然后，在我向你展示它的实际应用之后，我们将回到这里，了解更多关于它是如何工作的。

丑陋的用户界面

我实际上将 UI 暂时做得相当丑陋，有两个原因：

  1. 我不想让读者现在就关注它的外观。
  2. 添加一层 CSS 来美化 LibreGrid 组件的实现非常容易。

父子 React 组件

接下来的图片显示了 UI 中有两个主要标题（一个黑色标题和一个绿色标题）。每个标题定义了一个独立的 React 组件的区域。

  1. DataLoader - 我为本文构建的父 React 组件，以便你能够看到 LibreGrid 的实际应用。DataLoader 的内容以 **[Load Data]** 按钮结束。
    • DataLoader 由多个 HTML 输入控件组成（除一个复选框和一个 **[Load Data]** 按钮外，其余都是文本框）。
  2. LibreGrid - 绿色边框内的所有内容都是 LibreGrid（我们正在讨论的目标组件）。
    • 我已将 LibreGrid 添加为示例的子组件，以便我们可以从父组件 (DataLoader) 传递数据。
      您的领域模型数据将在这里显示，用于排序、搜索、编辑和生成已修改的 JSON。

DataLoader - 使用 LibreGrid 的组件

再次强调，我创建 DataLoader 完全是为了向您展示将数据加载到 LibreGrid 中并将其用于您自己的项目和领域对象的简便性。

首先，您可以看到当应用程序运行时，它最初会加载一些示例数据（基于 Flintstones 卡通人物[^]）。现在我们可以暂时忽略它。

在我的网站上跟随运行代码

尝试本文中展示的实时版本，请访问我的网站： https://newlibre.com/LibreGrid/[^]

关注三个 HTML 文本输入框

首先，我们将只使用三个 HTML 文本输入字段来加载我们的数据。

  1. Data - 文本输入框，我们将在此粘贴代表领域对象数组的 JSON。
  2. Fields - 文本输入框，我们将在此输入一个字符串数组，代表领域对象中存在的字段名。
  3. Column Headers - 文本输入框，我们将在此输入一个字符串数组，代表将在 LibreGrid 中每个列上方显示的标题文本。

有什么大不了的？

起初，当您看到这个时，您可能会觉得没什么大不了的。我理解。一开始，它看起来并不多，但它提供了很多功能，我马上就会向您展示这些功能。首先，请允许我指出一些您可能觉得奇怪的地方。

几件重要的事情需要注意

  1. ID 列 - 如果数据没有 ID 列（只有一个自动递增的整数列），那么我会添加一个。如果数据本身就有值，我们也可以处理。
  2. 排序 - 数据最初按 ID 列升序排序。但是，要对数据进行排序，只需单击列标题即可。
  3. 允许数据重置 -- 您稍后将看到更多关于此的信息，但这只是一种允许子 LibreGrid 组件仅在用户需要时才重新加载数据的方式，以免我们擦除他们对数据所做的更改。
  4. 标题 - 标题只是一个字符串数组。如果您不添加任何标题，则不会在列上方显示任何文本，您也将无法单击标题来排序数据。您也可以使用与字段名相同的字符串数组，但这并非强制。字段名称必须与领域对象的属性名称匹配，而标题仅仅是显示的文本。

免费获得更多功能

但 LibreGrid（我们在这篇文章中实际讨论的主要组件）的真正强大之处在于我们尝试使用它的一些功能。

所有功能列表（参见相关快照）

  1. 排序数据 - 单击任一标题即可对数据进行排序。
  2. 编辑数据 - 您可以编辑除 ID 字段外的任何数据。要编辑，请双击任何单元格，它将变成一个 HTML 文本输入框，允许您输入新值。
  3. 撤销更改 - 选择要更改的行旁边的复选框，然后单击 **[Revert Changes]** 按钮。
  4. 添加新行 - 单击添加新行按钮，然后编辑每列中的数据。
  5. 搜索/过滤数据 - 单击 **[Show Search]** 按钮，然后输入搜索字段，仅显示匹配的数据。
  6. 生成 JSON（包括您所做的更改） - 单击 **[Get JSON]** 按钮。

1. **排序数据** -（单击标题两次，降序排序）。

2. **编辑数据** - 如果您单击一个尚未设置 EditableIndex 的列，那么您将无法编辑该列中的数据。这使得 LibreGrid 最终可以自定义。要编辑数据，您必须首先将其索引值添加到 HTML 文本输入框中（如图所示）。在我们的例子中，我们将其设置为 1。ID 列永远不可编辑，因为这没有实际意义（但如果您愿意，可以在 LibreGrid 的源代码中更改它）。

一旦用户按下 **<ENTER>** 键（完成编辑值后），数据将显示已更改。

3. **撤销更改** - 选择要更改的行旁边的 checkbox，然后单击 **[Revert Changes]** 按钮。

这里没什么可看的，数据已恢复到原始值。

4. **添加新数据行** -- 单击按钮，会添加新行（带有新的唯一 ID 值）。数据是可编辑的（只要您添加了 editableIndexes）。

5. **搜索/过滤数据** - 这对于您拥有大量数据（我们很快就会看到大量数据）非常有用。单击 **[Show Search]** 按钮，文本输入字段将出现在每列上方。输入您要搜索的值（过滤数据）。

我添加了一些数据，以便示例更清晰。

在输入框中输入一个 id 值…（在我们的例子中，我输入 5）。

在其他列上搜索

请注意，您只能在 ID 列上搜索。我们可以在 DataLoader 中更改它，以便使 [fake] 列也可以被搜索。我们只需要更改 searchableIndexes 的值。这是我们 LibreGrid 的又一个自定义选项。

显示列中所有包含字母 'o' 的数据。

6. 为您的已修改数据生成 JSON

如果您保留过滤器（过滤掉字母 'o'），并且立即单击 **[Get JSON]** 按钮，您将看到以下内容（一个弹出窗口，显示已显示的领域对象集合作为 JSON）。

如果您右键单击关闭窗口，然后单击 **[Hide Search]** 按钮，将出现原始（未过滤）对象集合。

现在，如果您再次简单地单击 **[Get JSON]** 按钮，您将看到包含所有领域对象（未过滤）的 JSON。

它是一个非常强大的工具

当然，如果您只是加载一个领域对象集合并编辑一列，那么这些数据将反映在生成的 JSON 中，这意味着通过我创建的这个开源工具，您可以加载、编辑和生成 JSON。

考虑到所有这些，现在让我们再进一步，从 WebAPI 加载数据，以证明它可以在任何数据对象数组上工作。我们还将证明可以通过 fetch()[^] 从第三方 WebAPI 获取数据。

加载一些来自 WebAPI 的数据 - Star Wars API

为了证明这一点适用于几乎任何领域对象数组，我现在将向您展示如何从一个名为 SWAPI（Star Wars API）的第三方 WebAPI 加载数据。

查看 SWAPI 中的 Star Wars 人物

首先，看看 SWAPI 返回的 Star Wars 人物（角色）列表数据。

单击以下链接查看数据： https://swapi.dev/api/people[^]

您将看到一个看起来像这样的页面（我的标记解释了详细信息）。

您可以看到有一个**领域对象数组**\*，其中包含属性。这对于我们使用 LibreGrid 的目的来说非常完美。

\*该域包含一些 SWAPI 开发人员命名为 People 的对象。

在 LibreGrid 中加载 SWAPI 数据

要将此数据加载到 LibreGrid 中，我们需要以下信息：

  1. WebAPI 的 URL (https://swapi.dev/api/people)
  2. 返回的数据集的名称（对象数组）。在这种情况下，它被命名为 results。这非常重要，因为我们必须告诉 DataLoader 在我们检索的数据中，目标对象数组在哪里。有时，webapi 直接返回对象数组，但并非总是如此。对于 SWAPI，还会返回许多其他数据——这就像元数据（描述数据的数据）。
  3. 我们要显示在 LibreGrid 中的字段列表（这些是领域对象属性，并且必须命名完全相同，否则代码将找不到它们）。
  4. 我们要显示的标题文本。

就是这样。我们开始吧！！

首先，看看我们在从 WebAPI 加载时将要使用的新 HTML 输入字段。

这是我们的设置方式以及按下 **[Load Data]** 按钮时将发生的结果。

我包含数据，以便您可以将其复制/粘贴到我的网站上的实时示例中，或者如果您是本地构建的代码。

https://swapi.dev/api/people // URL
["id","name", "height", "mass", "hair_color", "eye_color", "birth_year"] // fields
results // data name
["id","name", "height", "mass", "hair_color", "eye_color", "birth_year"] // headers

所有功能都有效

继续添加您的 editableIndexes、searchableIndexes 等，您将看到所有功能都已存在。我为此通用功能付出了很多努力，但它效果很好。

Bug？

是的，您肯定会发现一些错误，但它总体上运行得相当好，您发现的大多数错误可能都是增强类型的。

另一个有趣的功能：numericSortIndexes

您可能已经注意到，还有一个功能我们还没有研究过。这就是数字排序索引的概念。这仅仅意味着您将希望基于数值对某些列进行搜索。

现在我们有了一些好的数据，这将更容易解释。height 和 mass 这两个字段是数字类型的数据，但如果您为它们添加 sortIndex，它们将按字母顺序排序。这里，我将展示我的意思。

如果您尝试对 height 字段中的数据进行排序，它是按字母顺序排序的，而不是按数字顺序排序的，正如您所看到的，150 甚至 202 在 96 之前，这是不正确的。

我们只需要为该字段和 mass 字段添加一个 numericSortIndex，然后它们就可以正确排序了。

我实际上为 ID、height 和 mass 列添加了 numericSortIndex。现在，您可以看到 height 列的排序是正确的，按升序。

以上就是所有功能。还有很多可以讨论的，但我将发布这篇文章，看看您的想法。我将很快发布第二篇文章，其中将显示所有数据是如何传递到 LibreGrid 的构造函数中的，以便您了解如何使用它。

它看起来会像这样。查看源代码，看看您的想法。

<LibreGrid
          headers={JSON.parse(this.state.headers)}
          data={this.state.extra}
          fields={this.state.fields}
          numericSortIndexes={JSON.parse(this.state.numSortIndexes)}
          editableIndexes={JSON.parse(this.state.editableIndexes)}
          searchableIndexes={JSON.parse(this.state.searchableIndexes)}
          useLocalData={this.state.useLocalData}
        />

历史

  • 2022 年 12 月 8 日：首次发布
© . All rights reserved.