AG-Grid的agNumberColumnFilter在valueFormatter中无法与计算值一起使用的问题可以通过以下解决方法来解决:
const gridOptions = {
// ...其他配置
onFilterModified: function() {
// 获取当前过滤器条件
const filterInstance = gridOptions.api.getFilterInstance("columnName");
const filterValue = filterInstance ? filterInstance.getModel().filter : null;
// 计算值
const calculatedValue = 100;
// 将计算值与过滤器条件进行比较
if (filterValue && filterValue !== calculatedValue) {
// 如果过滤器条件不匹配计算值,则手动清除过滤器
gridOptions.api.setFilterModel(null);
gridOptions.api.onFilterChanged();
}
},
// ...其他配置
}
const CustomNumberFilter = function() {};
CustomNumberFilter.prototype.init = function(params) {
this.valueGetter = params.valueGetter;
this.eGui = document.createElement("div");
this.eGui.innerHTML = `
`;
this.eGui.querySelector("#customFilterValue").addEventListener("input", this.onFilterChanged.bind(this));
};
CustomNumberFilter.prototype.getGui = function() {
return this.eGui;
};
CustomNumberFilter.prototype.isFilterActive = function() {
return this.eGui.querySelector("#customFilterValue").value !== "";
};
CustomNumberFilter.prototype.doesFilterPass = function(params) {
const value = this.valueGetter(params);
const filterValue = parseFloat(this.eGui.querySelector("#customFilterValue").value);
// 计算值
const calculatedValue = 100;
// 将计算值与过滤器条件进行比较
if (filterValue !== calculatedValue) {
return false;
}
return value === filterValue;
};
CustomNumberFilter.prototype.onFilterChanged = function() {
this.filterChangedCallback();
};
CustomNumberFilter.prototype.getApi = function() {
return {
getModel: () => ({
filter: parseFloat(this.eGui.querySelector("#customFilterValue").value)
}),
setModel: (model) => {
this.eGui.querySelector("#customFilterValue").value = model ? model.filter : "";
}
};
};
const gridOptions = {
// ...其他配置
frameworkComponents: {
customNumberFilter: CustomNumberFilter,
},
columnDefs: [
{
headerName: "Column Name",
field: "columnName",
filter: "customNumberFilter",
valueGetter: (params) => params.data.columnName,
},
// ...其他列定义
],
// ...其他配置
};
上述两种方法都可以解决agNumberColumnFilter在valueFormatter中无法与计算值一起使用的问题。您可以根据自己的需求选择其中一种方法来实现。