// app.component.ts
import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
@Component({
selector: 'app-root',
template: `
<ag-grid-angular
style="width: 100%; height: 500px;"
class="ag-theme-alpine"
[gridOptions]="gridOptions"
[rowData]="rowData"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
<button (click)="copySelectedRows()">复制选中行</button>
`,
})
export class AppComponent {
gridOptions: GridOptions;
rowData: any[];
columnDefs: any[];
constructor() {
this.gridOptions = {};
this.rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 },
];
this.columnDefs = [
{ field: 'make' },
{ field: 'model' },
{ field: 'price' },
];
}
onGridReady(params: any) {
this.gridOptions.api = params.api;
}
copySelectedRows() {
const selectedRows = this.gridOptions.api.getSelectedRows();
const formattedData = selectedRows.map(row => {
return `${row.make}, ${row.model}, ${row.price}`;
}).join('\n');
navigator.clipboard.writeText(formattedData).then(() => {
console.log('复制成功!');
console.log(formattedData)
}).catch(err => {
console.error('复制失败:', err);
});
}
}
AG-Grid 选择行复制剪切板功能收费怎么办?直接上代码
于 2024-11-06 00:08:32 首次发布