angular - ag-grid 中的自定义过滤器在 Angular 10 应用程序中不起作用
问题描述
我正在开发一个使用 ag-grid 的演示应用程序。我需要创建一个自定义过滤器来使用 ranger 过滤数字。所以我为此创建了一个自定义过滤器。但是过滤器不起作用并显示在网格的头部。代码如下:
应用程序组件html:
<ag-grid-angular
#agGrid
style="width: 100%; height: 500px;"
domLayout='normal'
class="ag-theme-alpine"
[rowData]="rowData"
[defaultColDef]="defaultColDef"
[columnDefs]="columnDefs"
[statusBar]="statusBar"
rowSelection="multiple"
(gridReady)="onGridReady($event)"
floatingFilter="true"
[singleClickEdit]="true"
>
</ag-grid-angular>
应用组件 ts:
import { MemberInfoService } from './_Services/member-info.service';
import { Component, OnInit } from '@angular/core';
import { ColDef, GridApi } from 'ag-grid-community';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import { SliderFloatingFilter } from './SliderFloatingFilter/slider-floating-filter.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Ng-Grid Example';
private gridApi: GridApi;
private gridColumnApi;
public statusBar;
rowData: any;
columnDefs: ColDef[] = null;
frameworkComponents;
constructor(private memberService: MemberInfoService) { }
defaultColDef: {
editable: false,
sortable: true,
filter: 'agTextColumnFilter'
}
ngOnInit(): void {
this.columnDefs = [
{
headerName: 'Member Id', field: 'MemberId', sortable: true, filter: 'agNumberColumnFilter',
width: 150,
checkboxSelection: true, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true
},
{ headerName: 'Member Name', field: 'MemberName', sortable: true, filter: 'agTextColumnFilter' },
{ headerName: 'Category', field: 'Category', sortable: true, filter: 'agTextColumnFilter', width: 150 },
{ headerName: 'Floor', field: 'Floor', sortable: true, filter: 'agTextColumnFilter' },
{ headerName: 'Shop No', field: 'ShopNo', sortable: true, filter: 'agTextColumnFilter', width: 150 },
{ headerName: 'Shop Name', field: 'ShopName', sortable: true, filter: 'agTextColumnFilter' },
{
headerName: 'Amount', field: 'Amount', editable: true, sortable: false, filter: 'agNumberColumnFilter',
valueParser: ({ newValue, oldValue }) => isNaN(Number(newValue)) ? oldValue : Number(newValue),
pinned: 'right', width: 150,
//cellStyle: { color: '#fff', 'background-color': '#37474f' },
// cellStyle: ({ value }) => ({
// 'background-color': value > 1000 ? 'green' : 'white'
// }),
cellClassRules: {
'cell-value-negative': ({ value }) => value < 0,
'cell-value-positive': ({ value }) => value >= 0
},
floatingFilterComponent: 'sliderFloatingFilter',
floatingFilterComponentParams: {
maxValue: 0,
suppressFilterButton: true,
},
suppressMenu: false,
}
];
this.statusBar = {
statusPanels: [
{
statusPanel: 'agTotalAndFilteredRowCountComponent',
align: 'left',
},
{
statusPanel: 'agTotalRowCountComponent',
align: 'center',
},
{ statusPanel: 'agFilteredRowCountComponent' },
{ statusPanel: 'agSelectedRowCountComponent' },
{ statusPanel: 'agAggregationComponent' },
],
};
this.rowData = this.memberService.getMemberInfo();
this.frameworkComponents = { sliderFloatingFilter: SliderFloatingFilter };
}
// onGridReady({ api }: { api: GridApi }) {
// this.gridApi = api;
// this.gridApi.sizeColumnsToFit();
// }
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
params.api.sizeColumnsToFit();
window.addEventListener('resize', function () {
setTimeout(function () {
params.api.sizeColumnsToFit();
});
});
params.api.sizeColumnsToFit();
}
}
自定义过滤器html:
<input
type="range"
min="0"
[max]="maxValue"
data-show-value="true"
data-popup-enabled="true"
[(ngModel)]="currentValue"
(ngModelChange)="valueChanged()" />
自定义过滤器ts:
import { Component } from '@angular/core';
import { AgFrameworkComponent } from 'ag-grid-angular';
import {IFloatingFilter,IFloatingFilterParams,NumberFilter,NumberFilterModel,} from 'ag-grid-community';
export interface SliderFloatingFilterParams extends IFloatingFilterParams {
value: number;
maxValue: number;
}
@Component({
templateUrl: './slider-floating-filter.component.html'
})
export class SliderFloatingFilter implements IFloatingFilter, AgFrameworkComponent<SliderFloatingFilterParams> {
public params: SliderFloatingFilterParams;
public maxValue: number;
public currentValue: number;
agInit(params: SliderFloatingFilterParams): void {
this.params = params;
this.maxValue = this.params.maxValue;
this.currentValue = 0;
}
valueChanged() {
let valueToUse = this.currentValue === 0 ? null : this.currentValue;
this.params.parentFilterInstance(function (instance) {
(<NumberFilter>instance).onFloatingFilterChanged(
'greaterThan',
valueToUse
);
});
}
onParentModelChanged(parentModel: NumberFilterModel): void {
if (!parentModel) {
this.currentValue = 0;
}
else {
this.currentValue = parentModel.filter;
}
}
}
解决方案
您需要将您传递frameworkComponents
给您的网格实例,将您的 html 代码更改为:
<ag-grid-angular
#agGrid
style="width: 100%; height: 500px;"
domLayout='normal'
class="ag-theme-alpine"
[rowData]="rowData"
[defaultColDef]="defaultColDef"
[columnDefs]="columnDefs"
[statusBar]="statusBar"
rowSelection="multiple"
[frameworkComponents]="frameworkComponents"
(gridReady)="onGridReady($event)"
[singleClickEdit]="true"
>
</ag-grid-angular>
然后添加SliderFloatingFilter
到entryComponents
你的模块中。像这样:
entryComponents: [SliderFloatingFilterComponent]
演示。
推荐阅读
- python - tf.data.Dataset.from_generator(output_shapes=...) 与 flow_from_directory(target_size=...)
- python - 获取句子的主题或关键字
- c# - '一个或多个实体的验证失败。有关更多详细信息,请参阅“EntityValidationErrors”属性。
- javascript - 将自定义标签作为数组传递给 Chart JS 工具提示
- javascript - 分配有功能的按钮不会像我说的那样做
- c++ - 为什么 io_context 出现在我的 boost asio 协程服务器中
- asp.net - 间隔运行查询 [基于小时]
- docker - 如何在没有“响应标头 > 内容类型:文本/html”的情况下下载 Django 管理页面 CSS?他们没有效果
- c# - 如何继续 WaterfallStep 而不是调用 Dispatcher
- java - 关于 cql 过滤器