使用 Angular 构建带过滤功能的数据网格

Kendo UI 使得从基本想法到完整的应用程序变得轻而易举，这得益于其庞大的组件库。我们谈论的是超过 100 个组件，您可以随时将其添加到您的应用程序中，无论您使用的是 React、Angular 还是 Vue — 它们都能完美运行。这是因为 Kendo UI 实际上是一个包含四个 JavaScript 库的捆绑包，每个库都是为其各自的框架原生构建的。但更重要的是，正如我们之前提到的，这些组件具有高度可定制性，您可以根据自己的喜好进行调整。

但 Kendo UI 的真正杀手锏在于：它承担了繁重的任务。样式很棒，但这与其他组件框架相比，Kendo UI 的优势在于其开箱即用的功能。

以数据为例。您无需花费大量时间来寻找将数据绑定到组件的最佳方法，因为它已成为一项既定事实，从而使您能够将更多时间专注于主题设置和 UI 优化。

或许了解 Kendo UI 如何简化数据处理的最佳方式是通过实际操作，因此……

让我们看一下 Angular 网格组件

这是用于 Angular 的 Kendo UI 数据网格组件。其中包含大量数据，对吧？我们看到的是一个员工列表，显示了每个人的姓名、图片和其他信息。

与 Kendo UI 的所有组件一样，它不像是一个数据网格组件，而是被硬塞到多个框架中使用。该数据网格是专门为 Angular 构建和设计的，就像他们的 KendoReact 网格组件是专门为 React 设计的一样。

现在，通常情况下，一个简单的 <table> 元素可能可以解决问题，对吧？但是，用于 Angular 的 Kendo UI 数据网格包含许多额外的功能，使其拥有更好的用户体验。您可以立即注意到，它提供了围绕将数据导出到 Excel 或 PDF 等操作的交互式功能。并且还有很多其他非凡的功能，如果没有这些功能，您将花费大量时间和精力来创建组件。

过滤

这是适合您的一个功能：过滤数据网格。假设您查看的是上面的数据网格示例中的员工列表，但该公司的员工人数成千上万。如果没有考虑大量功能，比如搜索、可排序列和分页，要找到特定的人员将非常困难 — 而 Kendo UI 的数据网格提供了所有这些功能。

用户可以快速解析绑定到 Angular 数据网格的数据。可以通过专用的过滤行或通过在列标题中的过滤图标上单击时弹出的过滤菜单来执行过滤操作。

Kendo UI 的文档非常棒。以下是快速实现此功能的方法。

首先，导入组件

这里没有技巧 — 像导入任何其他组件一样导入数据网格

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataBindingDirective } from '@progress/kendo-angular-grid';
import { process } from '@progress/kendo-data-query';
import { employees } from './employees';
import { images } from './images';

接下来，调用组件

@Component({
  selector: 'my-app',
  template: `
    <kendo-grid>
      // ...
    </kendo-grid>
  `
})

当然，这还不完整，因为接下来我们需要……

配置组件

我们要启用的关键功能是过滤，但 Kendo 的 Angular 网格接受各种功能参数，可以一举启用这些参数，包括排序和分组，以及分页和虚拟化，仅举几例。

过滤？只需一行代码即可将其绑定到列标题。

@Component({
  selector: 'my-app',
  template: `
    <kendo-grid
      [kendoGridBinding]="gridView"
      kendoGridSelectBy="id"
      [selectedKeys]="mySelection"
      [pageSize]="20"
      [pageable]="true"
      [sortable]="true"
      [groupable]="true"
      [reorderable]="true"
      [resizable]="true"
      [height]="500"
      [columnMenu]="{ filter: true }"
    >
      // etc.
    </kendo-grid>
  `
})

然后，标记 UI 的其余部分

我们不会深入讨论这个问题。 Kendo UI 的文档提供了此操作的优秀示例。现在是进行样式设置的好时机，这在 styles 参数中完成。同样，对 Kendo UI 组件进行主题设置非常容易。

到目前为止，我们已经拥有了一个外观良好的数据网格，即使我们还没有将任何实际数据插入其中！

最后，绑定数据

您可能已经注意到，当我们导入组件时，我们也导入了“employee”数据。我们需要将这些数据绑定到组件。现在，像我这样的人可能会躲到角落里哭泣，但 Kendo UI 让这件事变得太容易了。

// Active the component on init
export class AppComponent implements OnInit {
  // Bind the employee data to the component
  @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
  // Set the grid's data source to the employee data file
  public gridData: any[] = employees;
  // Apply the data source to the Grid component view
  public gridView: any[];

  public mySelection: string[] = [];

  public ngOnInit(): void {
    this.gridView = this.gridData;
  }
  // Start processing the data
  public onFilter(inputValue: string): void {
    this.gridView = process(this.gridData, {
      filter: {
        // Set the type of logic (and/or)
        logic: "or",
        // Defining filters and their operators
        filters: [
          {
            field: 'full_name',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'job_title',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'budget',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'phone',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'address',
            operator: 'contains',
            value: inputValue
          }
        ],
      }
    }).data;

    this.dataBinding.skip = 0;
  }

  // ...
}

让我们再次查看演示

这真是太棒了，用最少的努力就能获得强大的功能。Kendo UI 的 API 非常广泛，即使是最复杂的功能也可以变得非常简单。

而且我们甚至还没有涉及到 Kendo UI 组件的许多其他很棒的功能。例如可访问性。你能想象为使这样一个组件具有可访问性而需要考虑的所有因素吗？与我们获得的所有其他强大功能一样，Kendo UI 也可以帮助我们解决可访问性问题，承担了使键盘友好的 UI 符合 WCAG 2.0 Alice 标准并与第 508 节和 WAI-ARIA 标准相符的繁重工作。

开始使用 Kendo UI 数据网格