在Ag Grid中,可以使用startCellEditing()方法来启动多列编辑。以下是一个使用Angular 5和Ag Grid的代码示例:
npm install --save ag-grid ag-grid-angular
import { AgGridModule } from 'ag-grid-angular';
@NgModule({
imports: [
AgGridModule.withComponents([])
],
...
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private gridApi;
private gridColumnApi;
columnDefs = [
{headerName: 'Make', field: 'make', editable: true},
{headerName: 'Model', field: 'model', editable: true},
{headerName: 'Price', field: 'price', editable: true}
];
rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxster', price: 72000}
];
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
startEditing() {
const {gridApi, gridColumnApi} = this;
const selectedNodes = gridApi.getSelectedNodes();
selectedNodes.forEach((node) => {
gridColumnApi.getAllColumns().forEach((column) => {
if (column.isEditable()) {
gridApi.startEditingCell({
rowIndex: node.rowIndex,
colKey: column.getColId()
});
}
});
});
}
}
在上面的代码中,startEditing()方法会获取选中的行和列,并对每个可编辑的单元格调用startEditingCell()方法。
现在,当点击“Start Editing”按钮时,选中的行中的可编辑单元格将进入编辑模式。
注意:在Ag Grid中,startCellEditing()方法只会启动当前可见单元格的编辑模式。如果需要同时启动多个屏幕外的单元格的编辑模式,请确保在调用startCellEditing()之前先调用api.ensureIndexVisible()方法,以确保行和列可见。