在ag-Grid中使用下拉筛选器需要进行以下步骤:
npm install --save ag-grid-community ag-grid-angular
import { AgGridModule } from 'ag-grid-angular';
@NgModule({
imports: [
AgGridModule.withComponents([])
],
// ...
})
export class YourModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-your-component',
template: `
`,
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
columnDefs = [
{ field: 'make' },
{ field: 'model' },
{ field: 'price', filter: 'agNumberColumnFilter' },
{ field: 'color', filter: 'agSetColumnFilter' }
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000, color: 'red' },
{ make: 'Ford', model: 'Mondeo', price: 32000, color: 'blue' },
{ make: 'Porsche', model: 'Boxster', price: 72000, color: 'yellow' }
];
}
在上面的例子中,我们使用了agNumberColumnFilter
和agSetColumnFilter
来定义了两个下拉筛选器。
ng serve
现在,你应该能够在浏览器中看到带有下拉筛选器的ag-Grid表格。