在Angular和Javascript中,我在其中一列中使用了checkboxSelection: true
的Ag-Grid。
每当单击任何行的复选框时,我都需要调用一个函数... 怎么做 ??再一次当在Ag-Grid中选中该复选框时,如何调用函数?
答案 0 :(得分:0)
我假设只有一列具有复选框选择。
您可以使用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。
答案 1 :(得分:-1)
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);
}