您可以使用 JavaScript 数据网格做到这一点吗？
已发表: 2022-03-10这篇文章得到了我们在 Progress Kendo UI 的亲爱的朋友的大力支持，他们致力于为开发人员提供他们需要的工具，以利用和掌握塑造我们社会和世界的技术发展。 谢谢！
数据网格，也称为数据表，对于向用户呈现大量数据至关重要。 用户应该能够以易于理解、分析和操作的方式查看数据。 但是，在考虑性能、速度和用户体验的情况下构建数据网格视图可能是一项特别艰巨的任务。 在从头开始构建它们或使用功能有限且性能低于标准的库时尤其如此。
不乏捆绑数据网格的库。 然而，大多数只提供一组有限的网格功能，其中常见的是分页、过滤、排序和主题。 其他数据网格库被构建为依赖于多个依赖项的包装器。 与它们的本地对应物相比，这些类型的库会不利地影响网格的性能。 它们不是针对每种框架或语言都重新构建的。 因此，这些非本地库可能会很慢，可能无法利用框架/语言的高级特性，缺乏关键功能，并且需要额外的设置才能正常工作。
这些库的另一个特点是用户体验差。 他们经常无法针对不同的屏幕尺寸和方向实施响应式设计，无法锁定或使网格的某些部分具有粘性，并且使可访问性成为事后的想法。 除此之外，它们仅提供与网格分开的表单编辑，这通常涉及多个操作来完成。 在编辑大量数据项时，这可能会很累人且重复。 其他人甚至不提供编辑。 除此之外，他们往往缺乏数据导出功能，让用户依赖网页打印进行导出。
由于它们的功能和特性有限，您必须使用单独的库来补充它们以构建足够的网格。 例如，要绘制数据图表，您必须使用不同的图表库，因为网格库不会提供它。 此外，您无法将这些不相关的组件嵌入到网格中，因为对它们的支持不是内置的。
要解决这些问题，您必须使用一个不仅构建为原生的库，而且还包含一系列互补组件，并专注于出色的用户体验和性能。 为了演示理想数据网格的特性，我们将使用 Kendo UI 数据网格作为示例。 这些数据网格是名为 Progress Kendo UI 的库包中可用的 100 多个组件之一。 该捆绑包包含四个为多个前端框架本地构建的组件库。 这些是 Angular 的 Kendo UI、KendoReact、Vue 的 Kendo UI 和 jQuery 的 Kendo UI。 这篇文章中给出的示例将包含来自所有这四个库的网格。
响应式设计
对于数据网格，您的用户必须全面了解他们正在使用的数据。 隐藏或难以访问的数据阅读起来令人沮丧，并使用户完全脱离您的网格。 许多网格库不会使它们的网格具有响应性，您可以使用样式和一些逻辑来实现它。 这对于包含很多列的数据尤其复杂。 如果您要构建具有不同表示需求的不同类型数据的多个网格，这会进一步增加复杂性。 你必须弄清楚滚动、媒体查询、字体大小、缩放、是否省略部分数据等等。
现代数据表应该能够响应方向的变化并在所有屏幕尺寸上很好地显示所有数据。 例如，Kendo UI 数据网格会根据视口大小和它所容纳的行数来调整它们的大小。 例如，在 Angular Grid 中，您可以设置它的高度，如果它的某些内容不适合，网格将变为可滚动的。 设置高度只涉及为网格的 height CSS 属性指定一个值，并确保父元素也设置了高度。 无需其他配置。 您可以在此处的示例库存表中查看这是如何完成的。
除此之外，您可以选择切换网格中列的可见性，同时仍显示所有必需的数据。 您可以通过为不同的屏幕尺寸范围创建不同的列并使用列上的media属性来决定在何处显示它们来实现这一点。 例如，在这个 Angular 数据表中，对于较大的屏幕尺寸 ( media="(min-width: 450px)" )，列会完全显示并且看起来像这样。
但是，您可以选择在中等显示 ( media="(min-width: 680px)" ) 上隐藏价格、库存和停产列。 这应该是这样的：
在较小的显示器（ media="(max-width: 450px)" ）上，您可以创建一个自定义列来显示与此类似的所有数据：
Kendo UI 数据网格还支持 Bootstrap 4 设备标识符，如xs, sm, md, lg和xl 。 尽管这更易于使用，但它的用途并不广泛，因为它将您可以包含的查询数量限制为一个。 例如，使用您自己的断点，您可以有类似media="(min-width: 500px) and (max-width: 1200px)" 。 Bootstrap 4 设备标识符无法组合多个标识符。
可访问性合规性
确保您的网格符合现代可访问性标准应该是一个优先事项。 这样做可以确保残障人士可以与您的网格互动，并保证您的用户之间存在公平。 尽管如此，一些图书馆并没有做任何事情来确保他们的网格是可访问的。 其他人在评估可访问性时只做最低限度的工作，导致网格不符合标准。 将这些网格增强为可访问性涉及大量工作。 更复杂的网格设计使这进一步复杂化。 尽管这项工作稍后将为您和您的用户带来回报，但这些库应该将可访问性作为其产品的核心部分。
Kendo UI 数据网格通过支持主要的可访问性标准（如 WAI-ARIA、Section 508 和 WCAG 2.1）来优先考虑它。 例如，KendoReact 遵循 Section 508 标准，确保其大部分组件完全可访问并支持键盘导航。 它遵循 WCAG 的键盘可访问指南，使网格及其所有嵌入式组件键盘可操作。 因此，React Grid 达到了 AAA 的最高 WCAG 一致性级别。 作为一个 Web 组件，KendoReact Data Grid 符合 WAI-RAI 规范，以确保残障用户可以在网页上与其充分交互。 例如，在这个 React 数据网格中，您可以使用键盘导航到不同的组件和行。
虚拟滚动
使用虚拟滚动，只有一段数据在网格中呈现。 这通常设置为要获取的许多记录。 当用户滚动经过此段时，将呈现另一个相同大小的段。 这有助于提高性能，因为渲染大型数据集会占用大量内存并影响网格的性能和速度。 虚拟滚动给人一种呈现所有数据而没有任何性能后果的错觉。
网格库通常不支持虚拟滚动。 相反，他们鼓励分页，这可能不是用户查看大量数据时的最佳体验。 当试图渲染大量数据时，网格的性能会进一步受到影响，从而导致糟糕的用户体验。 对于支持虚拟滚动的图书馆，它只适用于数据中的记录，而不适用于记录的特定部分。 当数据具有多列时，这尤其受到限制。
Kendo UI 支持本地和远程数据的虚拟滚动。 例如，在 jQuery Grid 的 Kendo UI 中，您可以通过将网格的scrollable.virtual属性设置为 true 来启用它。 通过设置此项，网格仅加载由网格数据源的pageSize属性指定的项目数。 您可以在这个使用本地数据的 jQuery 数据网格中看到它是如何工作的。
<!DOCTYPE html> <html> <head>...</head> <body> ... <div></div> <script> var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... }); </script> </body> </html> 此相同设置适用于此 jQuery 数据表中所见的远程数据。 此外，如果记录包含多个属性，这些属性一次渲染的成本可能很高，您可以使用类似的设置来虚拟化网格的列。 scrollable.virtual属性需要设置为 true。 但是，虚拟化列不依赖于pageSize属性。 这个例子演示了这个特性。
PDF 和 Excel 导出
能够从网格中导出数据至关重要。 用户可能需要使用电子表格等应用程序分发或进一步操作它。 您的用户应该可以选择在不受网格限制的情况下轻松共享数据。 网格数据可能还需要您的网格不提供的额外处理，例如在电子表格和演示软件中。
尽管这是一个基本用例，但在许多库中并没有满足它。 用户必须求助于打印整个网页才能访问 PDF 格式的数据。 将数据传输到外部应用程序时，他们必须多次复制和粘贴。 这是可以理解的非常令人愤怒。
Kendo UI 数据网格以两种格式从网格中导出数据：PDF 和 Excel。 例如，在 Vue Data Grid 的 Kendo UI 中，要处理 PDF 导出，您将使用GridPDFExport组件。 使用它的save方法，您可以传递要包含在 PDF 导出中的数据。 数据可以是分页的，也可以是完整的。
<template> <button @click="exportPDF">Export PDF</button> <pdfexport ref="gridPdfExport"> <Grid :data-items="items"></Grid> </pdfexport> </template> <script> import { GridPdfExport } from '@progress/kendo-vue-pdf'; import { Grid } from '@progress/kendo-vue-grid'; export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ... }; </script> GridPDFExport组件允许您指定导出的页面大小、页边距、如何缩放页面上的网格等。这对于自定义更大的网格以适应 PDF 页面非常有用。 您可以将这些作为属性传递给组件。 这是一个例子：
<pdfexport ref="exportPDF" :margin="'2cm'" :paper-size="'a4'" :scale="0.5"> <Grid :data-items="products"></Grid> </pdfexport>您可以选择使用模板进一步自定义导出。 在模板中，您可以添加样式、指定页眉和页脚、更改页面布局以及向其中添加新元素。 您将使用 CSS 进行样式设置。 完成模板配置后，您可以使用 GridPDFExport 组件的 page-template 属性指定它。
要从 Kendo UI Vue Grid 导出 Excel 文件，您将使用ExcelExport组件。 使用它的saveExcel方法，您可以将文件名、网格数据、要显示的列等传递给它，并调用该方法来生成文件。 这个 Vue 数据网格是一个很好的例子，展示了如何使用 Kendo UI Vue Grid 实现 Excel 导出。
粘性列
当用户水平滚动网格时，他们可能需要冻结某些列或始终在视图中。 这些列通常包含重要信息，如 ID、名称等。冻结/粘性列始终保持可见，但可能会根据您的滚动方向移动到网格的左边缘或右边缘，或者根本不移动。 例如，在这个 Vue 数据网格演示中，ID 被冻结，Discontinued 列是粘性的。
网格库中的粘滞列可能很少见。 如果不存在，从头开始实施它可能是一项艰巨的工作。 它需要大量的样式来完成，如果你需要大量的网格，它可能无法很好地扩展。
在 Kendo UI 中设置粘性列需要最少的设置。 例如，在 Kendo UI Vue Grid 中，您需要将列的locked属性设置为 true 以使其具有粘性。 在这个 Vue 数据表中，ID 和 Discontinued 列通过设置locked属性变得粘性。 在下面的示例中，ID 和年龄被锁定。
<template> <grid :data-items="people" :columns = "columns"> </grid> </template> <script> import { Grid } from '@progress/kendo-vue-grid'; import { people } from './people' export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } } }; </script>编辑
网格的主要用例是查看大量数据。 有些图书馆只是坚持这一点，不考虑需要编辑的可能性。 这对用户不利，因为编辑是一个非常有用的功能。 当用户提出要求时，开发人员被迫创建一个单独的页面来编辑各个条目。 除此之外，用户只能在一个表单上编辑一个又一个条目。 这很烦人，并且会导致糟糕的用户体验，尤其是在处理大量数据时。
网格编辑的一个重要用例是促进批量编辑。 它对于一次修改大量数据很有用。 这可能涉及删除、创建和更新数据。
Kendo UI 数据网格支持以两种形式进行编辑：内联和使用弹出窗口。 通过内联编辑，所有数据都在网格内进行编辑。 单击单元格时，它变为可编辑的。 在弹出窗口中，弹出表单用于单独编辑每个条目。 在这个用于 jQuery 表格的 Kendo UI 示例中，使网格可编辑涉及三个步骤：设置网格的可编辑配置、建立数据源以及在数据源上配置 CRUD 操作。 这几个步骤降低了设置批量编辑所涉及的复杂性。 配置弹出编辑遵循相同的步骤，但开始时有不同的选项。
除了支持编辑之外，jQuery Grid 的 Kendo UI 还支持输入验证。 例如，您可以要求输入或强制最小长度。 除此之外，您还可以创建自定义输入控件。 输入控件不仅限于文本字段。 您可以使用下拉菜单、复选框、日期选择器、范围滑块等。这些既可以是内联的，也可以是弹出式的。 在这个 jQuery 数据表中，Category 字段是一个下拉列表。 验证也在同一示例中进行了演示。 单价字段已实施验证，确保其最小值为 1。
补充组件
大多数网格库都有一个单一的目的：提供网格。 他们不附带任何其他东西，只有网格。 您仅限于它提供的功能。 如果需要补充网格，可能会很棘手，因为其他库可能与它不兼容。 因此，在构建网格时，您只需保持在库的边界内。
Kendo UI 解决了这个问题，因为它的创建者的方法是提供一个全面的组件库，可以轻松地相互集成，而不是单个组件。 网格是众多组件库的一部分，可让您执行数据管理、导航、图表、编辑、媒体演示、聊天便利等所有操作。 您可以选择将这些组件嵌入到网格中，而无需执行一些复杂的设置并可能破坏它。 集成它们是无缝的，并且需要最少的配置。 以这个 Angular 数据表为例，它的 1 Day 列无缝地为每一行嵌入了一个完全交互式的图表。 您可以在网格中嵌入任意数量的组件，相信它可以正常工作并使其所有功能都按预期执行。
结论
数据网格需要易于理解、引人入胜、响应迅速且易于访问。 他们需要表现良好并快速加载数据。 但是，从头开始构建符合这些标准的数据网格可能需要很长时间并且是一项艰巨的任务。 您可能会选择使用数据网格库，但这些库通常没有针对性能进行优化，无法访问，并且仅附带一个网格组件。
创建一个使用起来令人愉悦的吸引人的数据网格需要一个专注于性能的库。 它可以通过原生构建并支持虚拟滚动来做到这一点。 它提供的数据网格需要响应并使用粘性列。 这样无论屏幕大小或方向如何，用户都可以轻松查看数据。 可访问性应该是网格的核心问题。 这保证了所有用户都可以在使用它们时获得平等的体验。
数据表应该扩展用户可以对数据执行的操作。 这可以通过编辑和促进多种格式的导出来实现。 除此之外，这些库应该附带其他组件来补充网格。 在一个库中拥有兼容的组件无需在一个应用程序中使用多个不同的冲突库。 提供这些功能的数据网格库将帮助您为用户制作出色的产品，而不会带来太多复杂性。