Question

我有一个kendo ui网格。每行网格都有复选框。当用户选中复选框时，我试图获取所选行的数据。当用户选中复选框时，如何获取所选行的数据？网格。请提前帮助我。

 <kendo-grid [data]="activeTabData" [selectable]="selectableSettings" [height]="410">
          <kendo-grid-column field="" title="" width="1" [locked]="false">
          </kendo-grid-column>

            <kendo-grid-column field="" title="" width="70" [locked]="true">
                <ng-template kendoGridCellTemplate let-dataItem let-idx="rowIndex">
                    <input type="checkbox" [kendoGridSelectionCheckbox]="idx" [(ngModel)]="checkboxOnly" (change)="setSelectableSettings()"/>
                </ng-template>
            </kendo-grid-column>

          <ng-template ngFor [ngForOf]="tableKeys" let-column>
            <kendo-grid-column
              width="180"
              field="{{column}}"
            >
            </kendo-grid-column>
          </ng-template>

           <ng-template kendoGridToolbarTemplate>
                <button type="button" kendoGridExcelCommand><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
            </ng-template>
          <kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
        </kendo-grid>

下面的xmycomp.ts文件

setSelectableSettings() {
       console.log("THis is King",this.checkboxOnly)
        this.selectableSettings = {
            checkboxOnly: this.checkboxOnly,
            mode: this.mode
        }
        console.log("HEHEH",this.activeTabData,this.selectableSettings);
    }

Answer 1

 <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
      <ng-template kendoGridCellTemplate let-dataItem>
           <input type="checkbox" [checked]="dataItem.Discontinued" 
               (click)=SetSelectedItem(dataItem) />
       </ng-template>
  </kendo-grid-column>

dataItem - 要获取的对象

SetSelectedItem(dataItem){
  console.log(dataItem);
  dataItem.Discontinued=!dataItem.Discontinued; //change the value
  if(dataItem.Discontinued){
    this.selectedItemIDs.push(dataItem.ProductID)
  }
  else{
    let index: number = this.selectedItemIDs.indexOf(dataItem.ProductID);
    if (index !== -1) {
    this.selectedItemIDs.splice(index, 1);
    } 
  }
  console.log('selectedItemIds:',this.selectedItemIDs);
}

关于外部操作（按钮单击），请参阅plunk

Plunker

当用户选中kedo ui grid.Angular2中的复选框时，如何获取选定的行数据

1 个答案: