如何在angular2中获取ag表格中选定行的数据？
如何在angular2中获取ag表格中选定行的数据？
提问于 2016-02-09 20:50:59
我已经在angular2中设置了ag-grid，运行良好，但我无法在控制台中获得selected row...There are no errors的值，window...This是我初始化网格的方式…
import {Component} from 'angular2/core';
@Component({
selector: 'aggride',
template: `
<div class="tr-card" >
<ag-grid-ng2 #agGrid of mgrid class="ag-fresh" rowHeight="40px"
[columnDefs]="columnDefs"
[rowData] = "rowData"
enableCellExpressions="true"
enableSorting="true"
unSortIcon="true"
rowSelection="single"
(getSelectedRows) = "getSelectedRows()"
(onSelectionChanged) = "onSelectionChanged()"
>
</ag-grid-ng2>
</div>
`,
directives: [(<any>window).ag.grid.AgGridNg2],
})下面是我在类中获取选定值的代码
export class AgGride {
gridOptions = {
columnDefs: 'columnDefs',
rowData: 'rowData',
rowSelection: 'single',
getSelectedRows: 'getSelectedRows',
onSelectionChanged: 'onSelectionChanged'
};
columnDefs = [
{ headerName: "Make", field: "make", editable: true },
{ headerName: "Model", field: "model", editable: true },
{ headerName: "Color", field: "Color", editable: true }
];
rowData = [
{ make: "Toyota", model: "Celica", Color: "Red"},
{ make: "Ford", model: "Mondeo", Color: "Blue"},
{ make: "Tata", model: "X100", Color: "Blue"},
{ make: "Volvo", model: "X5", Color: "White"},
];
mgrid: any;
onSelectionChanged() {
var selectedRows = this.mgrid.ag.this.gridOptions.getSelectedRows();
console.log(selectedRows);
}
}请告诉我如何纠正我的错误，以便在控制台窗口中获得选定行的数据/值……
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-02-09 23:25:02
在模板上，例如：
(rowClicked)='onRowClicked($event)'
(cellClicked)='onCellClicked($event)'
(selectionChanged) = 'onSelectionChanged($event)'然后在component类上：
onRowClicked(event: any) { console.log('row', event); }
onCellClicked(event: any) { console.log('cell', event); }
onSelectionChanged(event: any) { console.log("selection", event); }使用Chrome控制台查看事件对象内容。
Stack Overflow用户
发布于 2017-10-23 22:09:51
您可以使用api.getSelectedRows()返回一个包含选定行数据的数组。
public getSelectedRows(){
let rowsSelection = this.gridOptions.api.getSelectedRows();
console.info(rowsSelection);
}这就是我的工作。
Stack Overflow用户
发布于 2019-01-20 23:00:30
将rowClicked事件绑定到您自己的函数，如下所示。
<ag-grid-angular #grid
style="width: 100%; height: 500px;" class="ag-theme-balham"
[rowData]="rowList" [columnDefs]="columnsList" [rowSelection]="selectionMode"
(rowClicked)="onRowClick($event)"
>
</ag-grid-angular>然后在TS或JS中使用api，如下所示
onRowClick(event) {
if (this.selectionMode === 'multiple') {
this.selectedEntity = this.grid.api.getSelectedRows();
} else {
this.selectedEntity = this.grid.api.getSelectedRows()[0];
}
}当您的网格具有像多选这样的特性时，所有选定的数据都不会通过event参数传递。它将始终只是选定的行。
我不鼓励selectionChanged事件的原因是，它总是在selectionChanged事件之前调用rowClicked事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35292580
复制相关文章
相似问题