无法在 ag-grid 中为 agNumberColumnFilter 执行过滤器 n 排序

Question

我在 react 应用程序中显示一个 ag-grid，其中有一列 十进制数。我正在使用此列显示十进制数 英语（例如：100.00）和意大利语数字格式（例如：100,00）。我是 能够以两种格式显示，但过滤器 n 排序不起作用 意大利语格式。

 {
            headerName: fieldLabelEn.PRICE, field: "price", cellStyle: {},
            sortable: true, menuTabs: ["filterMenuTab"], maxWidth: 210,
            filter: 'agNumberColumnFilter', suppressSizeToFit: true,
                     valueGetter: params => {
                if (params.data.price!== '' ) {
                    if (numberDisplayFormat === "Italian/Norwegian/Spanish") {
                        return params.data.price;
                    } else {
                        return parseFloat(params.data.price.replace(/,/g, ''));
                    }
                }
            return null
            }
}

Answer 1

由于您使用valueGetter 进行格式化，因此会修改传递给网格的基础数据。

确切地说，当显示格式为英语时，网格会得到一个数字，而当格式是意大利语/挪威语/西班牙语时，它会得到一个字符串。这就是过滤/排序无法正常工作的原因。

为了克服这个问题，我建议使用valueFormatter，它只会修改显示而不是基础数据。

来自文档 - 值格式化程序允许您格式化值以进行显示。 当数据是一种类型（例如数字）但需要是 转换为人类阅读（例如放入货币符号和 数字格式）。

值格式化程序example

如果您想继续使用valueGetter，则必须提供自定义比较器和过滤器函数来解析字符串