通过过滤构建角度数据网格
- Christopher Nolan原创
- 2025-03-18 11:13:23380浏览
Kendo UI 的强大组件库让您能够快速从构思到构建完整的应用程序。它拥有超过 100 个组件，可轻松集成到您的 React、Angular 或 Vue 应用程序中。Kendo UI 实际上是四个原生 JavaScript 库的集合，每个库都针对其相应的框架进行了构建。更重要的是，正如我们之前所述，这些组件具有极高的主题定制性，您可以根据需要随意调整其外观。
Kendo UI 的真正优势在于：它承担了繁重的工作。出色的样式固然重要，但真正将 Kendo UI 与其他组件框架区分开来的，是其开箱即用的功能。
例如：数据处理。您无需花费大量时间来寻找将数据绑定到组件的最佳方法，Kendo UI 已为您处理好这一切，让您能够将更多时间专注于主题设计和 UI 优化。
要了解 Kendo UI 如何简化数据处理，最好的方法是实际操作一下，所以……
让我们看看 Angular Grid 组件
这是 Kendo UI for Angular 的数据网格组件。其中包含大量数据，对吧？我们看到的是员工列表，显示了每个人的姓名、图像和其他信息。
与所有 Kendo UI 组件一样，它并非一个简单的在多个框架中通用的数据网格组件。此数据网格是专门为 Angular 构建和设计的，就像他们的 KendoReact Grid 组件是专门为 React 设计的一样。
通常情况下，一个简单的 <table> 元素<em>可能</em>可以满足需求，对吧？但是 Kendo UI for Angular 的数据网格包含许多额外功能，可以显著提升用户体验。您可以立即注意到它提供了交互式功能，例如将数据导出到 Excel 或 PDF。还有许多其他非凡的功能，否则需要花费大量时间和精力才能实现。
<h3>过滤</h3>
<p>这里有一个功能：数据网格的过滤。假设您正在查看类似于上面数据网格示例中的员工列表，但该公司的员工数以千计。如果没有搜索、可排序列和分页等一系列功能，则很难找到特定人员——而 Kendo UI 的数据网格都具备这些功能。</p>
<p>用户可以快速解析绑定到 Angular 数据网格的数据。可以通过专用的筛选行进行筛选，或者通过单击列标题中的筛选图标弹出的筛选菜单进行筛选。</p>
<p>Kendo UI 的文档非常出色。以下是如何快速启动和运行该组件：</p>
<h3>首先，导入组件</h3>
<p>这里没有技巧——像导入任何其他组件一样导入数据网格：</p>
<pre class="brush:php;toolbar:false"><code>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';</code></pre>
<h3>接下来，调用组件</h3>
<pre class="brush:php;toolbar:false"><code>@Component({
selector: 'my-app',
template: `
<kendo-grid>
// ...
</kendo-grid>
`
})</code></pre>
<p>当然，这是不完整的，因为接下来我们必须……</p>
<h3>配置组件</h3>
<p>我们要启用的关键功能是筛选，但 Kendo 的 Angular Grid 接受各种功能参数，可以一举启用，例如排序和分组、分页和虚拟化等等。</p>
<p>筛选？只需一行代码即可将其绑定到列标题。</p>
<pre class="brush:php;toolbar:false"><code>@Component({
selector: 'my-app',
template: `
<kendo-grid filter="" kendogridselectby="id" true="">
// etc.
</kendo-grid>
`
})</code></pre>
<h3>然后，标记其余的 UI</h3>
<p>我们不会在这里深入探讨。Kendo UI 的文档中有一个关于外观的优秀示例。这也是处理样式的好时机，样式是在样式参数中完成的。同样，Kendo UI 组件的主题设置非常简单。</p>
<p>甚至在将实际数据插入之前，我们就已经拥有了一个外观漂亮的数据网格！</p>
<h3>最后，绑定数据</h3>
<p>当我们导入组件时，您可能已经注意到我们同时导入了“employee”数据。我们需要将该数据绑定到组件。现在，像我这样的人可能会躲在角落里哭泣，但 Kendo UI 让这个过程变得过于简单了。</p>
<pre class="brush:php;toolbar:false"><code>// 在初始化时激活组件
export class AppComponent implements OnInit {
// 将员工数据绑定到组件
@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
// 将网格的数据源设置为员工数据文件
public gridData: any[] = employees;
// 将数据源应用于 Grid 组件视图
public gridView: any[];
public mySelection: string[] = [];
public ngOnInit(): void {
this.gridView = this.gridData;
}
// 开始处理数据
public onFilter(inputValue: string): void {
this.gridView = process(this.gridData, {
filter: {
// 设置逻辑类型 (and/or)
logic: "or",
// 定义筛选器及其运算符
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;
}
// ...
}</code></pre>
<h3>让我们再次看看演示</h3>
<p>只需付出最少的努力就能获得如此强大的功能。Kendo UI API 非常广泛，即使是最复杂的功能也变得非常简单。</p>
<p>我们甚至还没有涉及到 Kendo UI 组件的其他出色功能。例如可访问性。你能想象需要付出多少考虑才能使这样的组件易于访问吗？与我们获得的所有其他强大功能一样，Kendo UI 也为我们解决了可访问性问题，承担了创建符合 WCAG 2.0 Alice 标准、符合第 508 节和 WAI-ARIA 标准的键盘友好型 UI 的繁重工作。</p>
<p>开始使用 Kendo UI 数据网格吧！</p>
</table>
以上是通过过滤构建角度数据网格的详细内容。更多信息请关注PHP中文网其他相关文章！