Ag-grid中的自定义排序

Question

下面是应用自定义排序的 ag-grid 标题

{
        headerName: "StudentId",
        field: "StudentId",
        width: 140,
        editable: false,
        enableRowGroup: true,
        comparator: (valA, valB, n1, n2, inverse) => {
          return valA.localeCompare(valB);

        },
        sortingOrder: ['desc', 'asc'] 
   }

我添加自定义比较器的原因是因为数据就像

   S19
   S129
   S176
   S99
   S433
   S10

在对提到的标题应用排序后，您将在这样的列中得到结果

   S10
   S129
   S176
   S19
   S433
   S99

我很确定你们中的一些人在查看结果时会感到困惑，但这是正确的，因为数据包含字母和数字，因此它是字符串，比较器根据字符串的排序工作正常。

但我想要这样的结果，因为它是人类快速可读的格式。

S10
S19
S99
S129
S176
S433

可以吗？？

Answer 1

这不是一个角度/ag-grid 问题，因为它是一个为您想要的排序行为设计算法的问题。除了comparator 函数之外，您似乎已经弄清楚了所有问题。

但我们需要更多细节。从您的小示例看来，您的算法可以简单地切断每个字符串的第一个字符，并简单地按剩余的数字排序。但是你会期待什么其他类型的字符串？每个字符串总是'S'后跟数字吗？如果是这样，那么我刚才描述的将起作用。

但是，如果每个字符串都有 x 个字符，后跟 y 个数字，那么您需要将字符串分成两部分（字符和数字）。然后先按字符排序，再按数字排序。

编辑：Op 已指定字符串始终为“S”后跟数字，因此我在此处编写自定义比较器函数。

    comparator: (valA, valB, n1, n2, inverse) => {
      const digitsA = parseInt(valA.substring(1));
      const digitsB = parseInt(valB.substring(1));
      return digitsA - digitsB;
    }

这基本上是从每个字符串中提取数字，将它们转换为数字并简单地返回差值。请注意，如果返回值小于 0，则表示 A 在列表中位于 B 之前。