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

Question

我在 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;
    }
}

我添加自定义比较器的原因是默认比较器是 case-sensitive 所以 "Abc" 排在 "xyz" 之后。

由于我的第一次尝试没有成功，我尝试将示例简化为上面的代码，据我所知，它应该与默认排序完全一样。

但问题是网格中没有任何反应。

请注意，当我单击它时，排序箭头显示在 header 中。我只有一个 sort-capable 列，就是这个。我可以验证它是否被调用，我将值记录到控制台并且值和 return 值都正常。在 header.

上每隔一次点击就正确设置了反向标志

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

如果我删除比较器代码，一切都会像以前一样工作。与case-sensitive比较。

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

感觉好像遗漏了一些简单的东西。

--- 编辑 ---

如果我出于某种未知原因 return 来自排序函数的随机值，就像这样

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;
    }
}

然后更新网格...当然是随机排列行，但至少会发生一些事情。当我有 "right" 排序功能时，没有任何反应....

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

Answer 1

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

显然你应该忽略反参数，并且 "normally" 排序任何反参数的值。所以正确的代码应该是：

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 似乎会在内部反转此排序

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

Ag-Grid isnt redrawn when using a custom sort

javascript

reactjs

ag-grid