首页 文章

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

提问于
浏览
2

我正在尝试在我的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="" width="50" [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" width="80"></kendo-grid-column>
    <kendo-grid-column field="ProductName"></kendo-grid-column>
    <kendo-grid-column field="UnitPrice" width="80" format="{0:c}"></kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" width="80"></kendo-grid-column>
   </kendo-grid>
`
})
export class AppComponent {

  public allItemsChecked: boolean = false;

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

(在Plunker中你可以看到 ProductsBindingDirectiveProductsService 实现)

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

我应该从网格中获取数据,更改所有项目中的属性并将其设置回来吗?或者我还没有看到另一种选择?

2 回答

  • 2

    我想我发现了一个类似但可能更清晰的解决方案:

    使用“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>
    

    使用kendo-grid中的属性

    [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 .

  • 3

    这就是我实现它的方式 . 我看不到你是如何数据绑定的,我使用了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网格 . 请注意,我必须设置 Headers 列,其中包含复选框sortable = false以获取要注册的click事件 .

    <kendo-grid 
    [data]="gridViewAdd">
        <kendo-grid-column [sortable]="false" field="add" width="50" [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;
            }
        }
    }
    

相关问题