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

这不是一个角度/网格问题，因为它是针对所需排序行为设计算法的问题。似乎您已经弄清楚了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之前。