ag-grid-angular 13.3.0 版本支持行拖拽和行拖拽管理,需要在 ag-grid-angular 模块中引入 RowDragModule 和 RowDragManagedModule。
示例代码:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { AppComponent } from './app.component';
import { RowDragModule } from '@ag-grid-enterprise/row-drag';
import { RowDragManagedModule } from '@ag-grid-enterprise/row-drag-managed';
@NgModule({
imports: [
BrowserModule,
AgGridModule.withComponents([]),
RowDragModule,
RowDragManagedModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { AllCommunityModules } from '@ag-grid-community/all-modules';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
private columnDefs = [
{ field: "make" },
{ field: "model" },
{ field: "price" }
];
private rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
];
private modules = AllCommunityModules;
public onRowDragEnd(params: {}) {
console.log('Row dragged: ', params);
}
}
以上代码中,通过在 AgGridModule 中引入 RowDragModule 和 RowDragManagedModule,使得 AgGrid 中可以配置 rowDragManaged=true 来启用行拖拽和行拖拽管理。同时,通过在组件中绑定 rowSelection="multiple",可以启用