问题描述:ag-grid Angular中,自定义排序参数显示为未定义。
解决方法示例:
import { AgGridModule } from 'ag-grid-angular';
import { CustomSortComponent } from './custom-sort.component';
@NgModule({
declarations: [
CustomSortComponent
],
imports: [
AgGridModule.withComponents([CustomSortComponent])
],
...
})
export class AppModule { }
import { ICellRendererParams, IDoesFilterPassParams, IFilterParams, RowNode, SortModel } from 'ag-grid-community';
@Component({
selector: 'app-custom-sort',
template: `
`,
})
export class CustomSortComponent implements IFilterParams {
private params: IFilterParams;
private customSortParam: string;
// 设置自定义排序参数
agInit(params: IFilterParams): void {
this.params = params;
}
// 过滤方法
doesFilterPass(params: IDoesFilterPassParams): boolean {
return true;
}
// 获取自定义排序参数
getModel(): any {
return this.customSortParam;
}
// 设置自定义排序参数
setModel(model: any): void {
this.customSortParam = model;
}
// 获取自定义排序参数显示值
getValue(): any {
return this.customSortParam;
}
// 自定义排序方法
sort(): void {
const sortModel: SortModel = [
{
colId: this.params.column.getColId(),
sort: 'asc',
sortIndex: 0,
sortedAt: new Date(),
}
];
this.params.api.setSortModel(sortModel);
}
}
import { Component } from '@angular/core';
import { CustomSortComponent } from './custom-sort.component';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
columnDefs = [
{
headerName: 'Column',
field: 'column',
sortable: true,
filter: 'agTextColumnFilter',
filterParams: {
filterOptions: ['equals', 'notEquals'],
newRowsAction: 'keep',
...
},
// 自定义排序组件
floatingFilterComponent: 'customSort',
// 自定义排序参数
floatingFilterComponentParams: {
suppressFilterButton: true,
},
...
},
...
];
frameworkComponents = {
customSort: CustomSortComponent,
};
...
}
以上是解决ag-grid Angular中自定义排序参数显示为未定义的方法示例。请根据具体情况进行调整和修改。