带有复选框列的 Kendo Angular 2 网格

Posted 2023-03-05

【中文标题】带有复选框列的 Kendo Angular 2 网格

【英文标题】：Kendo Angular 2 grid with checkbox column

【发布时间】：2017-10-15 12:11:53

【问题描述】：

我正在尝试在我的 Kendo Angular 2 网格中实现一列复选框。

我正在关注文档中的示例（不带复选框）： http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-custom-remote-directives

我已更改示例以添加列： http://plnkr.co/edit/hNkj1ZFZJopDyFxn59B3?p=preview

这是我的组件：

@Component(
selector: 'my-app',
template: `
    <kendo-grid 
        productsBinding
        [pageSize]="10"
        [pageable]="true"
        [sortable]="true"
        [height]="270">
      <kendo-grid-column field="checked" title=""  [headerStyle]="'text-align': 'center'" [style]="'text-align': 'center'">
        <ng-template kendoGridHeaderTemplate let-dataItem>
          <md-checkbox
              class="check-column"
              [checked]="allItemsChecked"
              color="primary"
              (change)="checkAllClicked($event)">
          </md-checkbox>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
          <md-checkbox
              class="check-column"
              [checked]="dataItem.checked"
              color="primary">
          </md-checkbox>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="ProductID" ></kendo-grid-column>
    <kendo-grid-column field="ProductName"></kendo-grid-column>
    <kendo-grid-column field="UnitPrice"  format="0:c"></kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" ></kendo-grid-column>
   </kendo-grid>
`
)
export class AppComponent 

  public allItemsChecked: boolean = false;

  checkAllClicked($event)
    console.log("checkAllClicked",$event);
    //TODO: implement...
  

（在 Plunker 中你可以看到 ProductsBindingDirective 和 ProductsService 的实现）

但是现在我不确定当单击标题中的复选框时更改所有项目的选中属性的最佳方法是什么...

我应该从网格中获取数据，更改所有项目的属性并将其重新设置吗？或者还有其他我没有看到的选项？

【参考方案1】：

我想我找到了一个类似但可能更清洁的解决方案：

使用“kendo-grid-checkbox-column”组件：

<kendo-grid-checkbox-column>
    <ng-template kendoGridHeaderTemplate let-dataItem>
        <input 
            type="checkbox" 
            name="selectAll"
            (change)="selectAllRows($event)" 
            [checked]="allRowsSelected"/>
    </ng-template>
</kendo-grid-checkbox-column>

在剑道网格中具有属性

[selectedKeys]="rowSelected"

和

[kendoGridSelectBy]="rowsSelectedKeys"

然后您可以在控制器中影响这些值：

private rowsSelected: number[] = [];

private rowsSelectedKeys(context: RowArgs): number 
    return context.dataItem.id;


private selectAllRows(e): void 
    if (e.target.checked) 
      this.allRowsSelected = true;
      this.rowsSelected = this.gridData.data.map(o => o.id);
     else 
      this.allRowsSelected = false;
      this.rowsSelected = [];
    

使用网格数据的好处是，如果您有过滤器，那么它只会“检查”过滤后的数据。在我的示例中，您可以在任何事件上处理检查的行的 ID。

【讨论】：

<kendo-grid-checkbox-column> 正确显示了一个不错的复选框列。不幸的是，使用 Angular 5，[selectedKeys] 似乎不可用。这是一个 plunker 示例 plunker：plnkr.co/edit/oGuXen2VIkqzoUQoG3K1?p=preview（来自 Kendo UI 的 Angular 文档和简化版。我的目标是选择主行，当然要知道最后选择了哪一行。

*现在使用 Angular 5 和当前版本的 kendo-grid

【参考方案2】：

这就是我实现它的方式。我看不到您是如何进行数据绑定的，我使用了 GridDataResult。为了这个例子，我简化了网格。

一些必需的组件，特别是我在这个例子中使用的 GridDataResult、State 和 process：

import  GridDataResult, PageChangeEvent  from '@progress/kendo-angular-grid';
import  SortDescriptor, State, process  from '@progress/kendo-data-query';

几个局部变量：

export class ClassComponent 
    gridViewAdd: GridDataResult;  // stores grid data
    allStudentsSelected: boolean = false;  // bound to header checkbox
    stateAdd: State =    // will hold grid state
        skip: 0,
        take: 2
    ;

组件 html 网格。需要注意的是，我必须将包含复选框的标题列设置为 sortable=false 才能注册点击事件。

<kendo-grid 
[data]="gridViewAdd">
    <kendo-grid-column [sortable]="false" field="add"  [headerStyle]="'text-align': 'center'" [style]="'text-align': 'center'">
        <ng-template kendoGridHeaderTemplate let-dataItem>
            <input style="zoom: 1.2;" 
                 type="checkbox" 
                 name="selectAll"
                 (change)="selectAllStudentsChange($event)" 
                 [checked]="allStudentsSelected"/>
         </ng-template>
         <ng-template kendoGridCellTemplate let-dataItem>
             <input style="zoom: 1.2;" 
                 type="checkbox" 
                 [checked]="dataItem.add" />
         </ng-template>
    </kendo-grid-column>
</kendo-grid>

这是我绑定到数据对象数组的地方：

private loadStudents(): void 
    this.gridViewAdd = process(this.students, this.stateAdd);

这就是点击事件。您可以通过我之前设置的 GridDataResult 变量来抓取网格中的当前项。循环遍历您的数据并更新绑定到您的复选框的数据元素。我的是一个名为“add”的布尔值

selectAllStudentsChange(e): void 
    // switch inactive checked value
    if (e.target.checked)
    
        this.allStudentsSelected = true;
        for (let i = 0;i < this.gridViewAdd.data.length; i++) 
            this.gridViewAdd.data[i].add = true;
        
     else 
        this.allStudentsSelected = false;
        for (let i = 0;i < this.gridViewAdd.data.length; i++) 
            this.gridViewAdd.data[i].add = false;
        
    

【讨论】：

我想使用这个解决方案。没有得到以下东西； 1. loadStudents() 何时调用 2.what is究竟（this.students, this.stateAdd）。