使用自定义排序时不重绘 Ag-Grid答案

【问题标题】：Ag-Grid isnt redrawn when using a custom sort使用自定义排序时不重绘 Ag-Grid
【发布时间】：2020-03-05 07:16:30
【问题描述】：

我在 React 中使用 AG-GRID（否则效果很好），我的列定义如下所示：

{
    headerName: "Firm",
    sortable: true,
    sort: "asc",
    sortingOrder: ["asc", "desc"],
    headerTooltip: "Firm",
    field: "firm",
    cellStyle: { "text-align": "left" },
    comparator: (valueA, valueB, nodeA, nodeB, isInverted) => {
        let retval;
        if (isInverted) {
            retval = valueB.localeCompare(valueA);
        } else {
            retval = valueA.localeCompare(valueB);
        }
        return retval;
    }
}

我添加自定义比较器的原因是默认比较器区分大小写，因此“Abc”排在“xyz”之后。

由于我的第一次尝试不起作用，我尝试将示例简化为上述代码，据我了解，它应该与默认排序完全一样。

但问题是网格中什么也没有发生。

请注意，当我单击它时，排序箭头会显示在标题中。我只有一个可排序的列，这就是这一列。我可以验证它是否被调用，我将值记录到控制台并且值和返回值都正常。每隔一次点击标题就会正确设置反向标志。

但是网格没有更新？？？为什么？

如果我删除比较器代码，一切都会像以前一样工作。具有区分大小写的比较。

使用自定义比较器时我需要做更多的事情吗？

感觉我错过了一些简单的东西。

--- 编辑 ---

如果我出于某种未知原因从排序函数返回随机值，像这样

comparator: (valueA, valueB, n1, n2, inverse) => {
    if (valueA === valueB) return 0;
    if (Math.random() > 0.5) {
        return valueA < valueB ? -1 : 1;
    } else {
        return valueA > valueB ? -1 : 1;
    }
}

然后网格更新....行的随机排序当然，但至少发生了一些事情。当我有“正确”的排序功能时，什么也没有发生......

谁能解释这种奇怪的行为？

【问题讨论】：

标签： javascript reactjs ag-grid

【解决方案1】：

在编写了一个简单的测试应用程序并测试了所有可能性后找到了答案。

显然你应该忽略逆参数，并“正常”排序逆参数的任何值。所以正确的代码应该是：

comparator: (valueA, valueB, n1, n2, inverse) => {
  if (valueA === valueB) return 0;
  return valueA < valueB ? -1 : 1;
}

或者像我的字符串一样：

comparator: (valA, valB, n1, n2, inverse) => {
  return valA.localeCompare(valB);
}

每当 sortOrder 从“asc”变为“desc”时，Grid 似乎会在内部反转这种排序

【讨论】：