时间戳

首页 > 解决方案 > 使用自定义排序时不重绘 Ag-Grid

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

问题描述

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

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

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

标签： javascriptreactjsag-grid

解决方案

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

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

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”时，网格似乎会在内部反转这种排序

推荐阅读