Ag-grid 中的自定义排序

Question

下面是 ag-grid 中的 header 应用了自定义排序

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

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

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

对提到的 header 进行排序后，您将在这样的列中得到结果

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

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

S10
S19
S99
S129
S176
S433

可以吗？？

Answer 1

这不是一个 angular/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 之前。

Ag-grid 中的自定义排序

custom sorting in Ag-grid

comparator

ag-grid

angular

ag-grid-angular