使用 Angular 的 Kendo UI 网格进行批量编辑
原文链接：www.telerik.com/blogs/batch…
在本教程中，我们将通过一个示例说明如何同时批量编辑 Kendo UI Grid 的所有行，有效地将整个网格绑定到 Angular Reactive FormsFormGroup并FormArray启用所有表单数据的验证和保存而不是逐行，所以它的行为更像一个“正常”的反应形式。这个例子是用Angular 8.2.6构建的**。**
下面的示例包含一个 Kendo UI 网格，其中包含默认以“查看”模式显示的产品列表。单击编辑按钮时，网格会切换到“编辑”模式，这使得所有产品字段均可编辑，并允许在网格中添加或删除产品。编辑后，您可以保存或取消更改。
该示例的样式是使用 Bootstrap 4.3、Angular 默认主题的 Kendo UI 以及主index.html文件中的几个自定义 CSS 样式完成的。有关为 Angular 设置 Kendo UI 组件样式的更多信息，请参阅此样式概述。
它正在 运行：（在stackblitz.com/edit/batch-… StackBlitz 上编辑）
带有 Kendo UI 网格的 Angular App 组件模板
应用组件模板包含用于显示示例 Kendo UI 网格的 HTML 和 Angular 模板语法；它包含一个<kendo-grid>包裹在引导卡中的单个组件，用于布局。
网格定义了模板引用变量，#grid因此可以使用ViewChild('grid')装饰器从下面的应用程序组件访问它，并且data网格的属性products使用 Angular 属性绑定绑定到应用程序组件中定义的数组[data]="products"。
借助isEditMode属性，当网格处于“查看”或“编辑”模式时会显示不同的工具栏，“查看”模式工具栏仅包含一个编辑按钮，“编辑”模式工具栏包含用于添加、保存的按钮和取消。每个工具栏都是使用<ng-template>带有kendoGridToolbarTemplate指令的标签定义的，每个按钮都使用 Angular 事件绑定属性绑定到应用程序组件中的事件处理程序方法，例如(click)="onAdd()".
有四列定义了<kendo-grid-column> tag— 一列用于每个产品字段，另一列带有仅在网格处于“编辑”模式时显示的删除按钮。
带有 Kendo UI 网格的 Angular App 组件
app 组件包含与我们的网格交互的所有属性和方法。
组件属性
products包含绑定到模板中具有属性绑定属性的网格的产品对象数组[data]="products"。
originalProducts用于在切换到“编辑”模式之前保存原始产品数组的副本，因此如果单击取消按钮，可以重置对产品数组的更改。
productsForm是一个 Angular Reactive FormGroup，它包含整个表单的FormArray所有FormControl组件，因此所有字段都可以一起验证和保存。
isEditMode 是一个布尔标志，用于在“查看”和“编辑”模式之间切换应用组件模板。
@ViewChild('grid') grid持有对应用程序组件模板中定义的 Kendo UI Grid 组件的引用。该ViewChild装饰用允许访问网格组件'grid'参数，因为它的相匹配#grid的定义的模板参考变量kendo-grid在模板标记。
组件方法
ngOnInit()用一组产品样本初始化产品数组，并将 设置productsForm为一个新的FormGroup包含FormArray用于保存所有产品表单组和控件的 a 。表单组是使用在组件构造函数中注入的实例创建的FormBuilder。
onEdit()单击“*编辑”*按钮时处理并将网格转换为可编辑形式。它复制 products 数组以防编辑操作被取消，然后调用几个辅助函数来初始化表单控件并将所有网格行切换到“编辑”模式，最后设置isEditMode为 true 以显示正确的工具栏模板。
onAdd()单击“*添加”*按钮将新产品行添加到网格底部时处理。它将一个新对象推送到 products 数组，将一个新表单组推送到FormArray的productsForm，然后将网格的新行设置为“编辑”模式。
onRemove(index)单击“*删除”*按钮以从网格中删除所选行时的句柄。首先它关闭网格的所有行（将它们设置为“查看”模式），然后从products数组中删除产品对象，并将所有行设置回“编辑”模式之前的产品表单组FormArray。我发现有必要在删除之前关闭所有行以避免来自网格的意外副作用。
onSave()单击“*保存”*按钮以验证和保存表单数据时处理。如果表单无效，则会显示警报并且不会保存数据。如果表单有效，则通过将更新的表单数据复制到 products 数组并将网格设置回“查看”模式来“保存”数据。在现实世界的应用程序中，您通常会在此处放置 API 或服务调用来持久化数据。
onCancel()当手柄取消按钮被点击，以去掉任何的变化和切换电网回“视图”模式。它关闭所有网格行以将它们设置回“查看”模式，然后通过将原始产品数据复制回产品数组来恢复任何更改，并设置isEditMode为 false 以在模板中显示正确的工具栏。
Angular 应用模块
这是一个相当简单的 Angular 应用模块，其中包含示例所需的内容。要将 Kendo UI Grid 用于 Angular，它会导入{ GridModule } from '@progress/kendo-angular-grid'并将其包含在装饰器的imports数组中@NgModule；并使用 Angular 反应式形式，它导入{ ReactiveFormsModule } from '@angular/forms'并将其包含在装饰器的imports数组中@NgModule。
结论
因此，这就是将 Kendo UI Grid 组件有效绑定到 Angular Reactive Forms 所需要做的一切FormArray，以便将所有表单字段作为一个整体进行批量编辑、验证和保存。
有关 Angular 的 Kendo UI 网格的更多信息，请查看www.telerik.com/kendo-angul…的官方文档。
谢谢阅读！
