Question

在Angular和Javascript中，我在其中一列中使用了checkboxSelection: true的Ag-Grid。

每当单击任何行的复选框时，我都需要调用一个函数... 怎么做？？再一次当在Ag-Grid中选中该复选框时，如何调用函数？

Answer 1

我假设只有一列具有复选框选择。

您可以使用selectionChanged事件绑定。只要您选中或取消选中该复选框，就会发出此事件。您可以通过here阅读更多有关它的内容。

但是，如果要检查选中的行是选中还是未选中，则最好绑定到rowSelected事件。

例如，在component.html上，您可以将onSelectionChanged()方法绑定到selectionChanged事件。

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [suppressRowClickSelection]="true"
    [rowSelection]="rowSelection"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
    (rowSelected)="onRowSelected($event)"
    (selectionChanged)="onSelectionChanged($event)"
  ></ag-grid-angular>

在component.ts上，您将定义onSelectionChanged()方法

onRowSelected(event) {
  console.log(event);
  console.log(event.node.selected);
  console.log(event.rowIndex);
}

onSelectionChanged(event) {
  console.log(event); // verify that the method is fired upon selection
  // do the rest
}

这里是demo。

Answer 2

    this.DategridOptions = {
          columnDefs: [
            { headerName: 'Name', field: 'Name', width: 500, filter: 'agTextColumnFilter' },
            { headerName: 'Relationship', field: 'Relationship', 
        filter:'agNumberColumnFilter', type: ''},
            { headerName: 'FromDate', field: 'FromDate', width: 200, filter: 
        'agTextColumnFilter', type: 'Date'},
            { headerName: 'ToDate', field: 'ToDate', width: 200, filter: 'agTextColumnFilter', 
        type: 'Date'},
            { headerName:'TicketsClaimed', field: 'TicketsClaimed', width: 200, filter: 
        'agTextColumnFilter'},
            { headerName: 'TicketstobeCancelled', field: 'TicketstobeCancelled', width: 200, 
        filter: 'agTextColumnFilter'}
          ],
          apiDataUrl: this.service.CancelTicket_URL + '/GetModel',
          showSerialNoColumn: true,
          showRowSelection: true,
          checkboxSelection: false,
          onSelectionChanged: (event) => this.onSelectionChanged(event),
          };
     onSelectionChanged(event){
console.log(event);
}

Ag Grid单击复选框调用函数

2 个答案: