Ag Grid 单击复选框调用函数

Question

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

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

Answer 1

我假设只有一列有复选框 selection.

您可以使用 selectionChanged 事件绑定。每当您 select 或 deselect 复选框时，都会发出此事件。您可以通过 here 阅读更多相关信息。

但是，如果您想检查 selected 行是否被选中，最好绑定到 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 单击复选框调用函数

Ag Grid Call a function on click of checkbox

javascript

ag-grid

angular

ag-grid-angular