带有ag-grid和字符串单元格的字母数字排序不一致 [英] Inconsistent Alphanumeric Sorting with ag-grid and String Cells

问题描述

我使用ag-grid-react来显示来自端点的数据表。我有一列包含需要使用自然排序算法进行排序的字母数字值（即数字分组在一起，字母数字字符串分组在一起...）

Im using ag-grid-react to display a table of data from an endpoint. I have a column which contains alphanumeric values which needs to be sortable using a "natural" sort algorithm (i.e. numbers are grouped together, alphanumeric strings are grouped together...)

下面是我的列定义。在网格上启用了排序功能，当我单击该列以对网格进行排序时，除 some 字符串以外的所有内容均显示为已排序，其中 some 字符串以中断以C开头的字符串序列的数字开头。

Below is my column definition. Sorting is enabled on the grid, and when I click the column to sort the grid, everything appears sorted except for some strings which start with a numeral that interrupt the sequence of strings beginning with C.

无论是 accentedSort 是还是假，即使使用a-grid的默认排序算法，也会发生这种情况基本的自定义排序比较器（请参见下文。）

This happens with ag-grid's default sorting algorithm, regardless of whether or not accentedSort is true or false, and even with a basic custom sort comparator (see below.)

列定义：

        field: 'cqttUnitPayItemDescriptionId',
        headerName: 'Description',
        type: 'dropdown',
        editable: true,
        resizable: true,
        valueGetter: (p) => {
            const value = p.data[p.colDef.field];
            const cellDescription = p.data.description;

            // returns a string value for display
            // `items` is an ImmutableJs Map of objects, grouped by index, containing a `description` string property.
            return value >= 0 ? items.getIn([value, 'description']) || cellDescription : value; 
        },
        cellEditorFramework: AgGridCellEditor({ component: AgDropdownEditor, renderProps: innerProps => ({ createable: true, labelProperty: 'description', options: itemsByUnitPayItemId.getIn([innerProps.data.unitPayItemId], Map()).toList(), ...innerProps }) }),
        sortable: true,
        width: 250,
        comparator: StringComparator
    },

自定义排序比较器：

export function StringComparator(valueA: string = '', valueB: string = '') {
    const valueALower = valueA.toLowerCase();
    const valueBLower = valueB.toLowerCase();
    return valueALower.localeCompare(valueBLower, 'en', { numeric: true });
}

排序不一致的可视示例：

Visual Example of the Sorting Inconsistencies:

鉴于上面的截图：比较器的手动测试显示字符串 4'x 8'x 16'（Dragline Mat）应该在 Construction Crew Move Around-Tie-Ins之前出现（即分别使用这些参数调用比较器的返回值为-1），但显然网格认为不是。可能是我缺少有关比较器函数调用范围的信息吗？

Given the screenshot above: Manual testing of the comparator shows that the string "4' x 8' x 16' (Dragline Mat)" should come before "Construction Crew "Move Around" - Tie-Ins" (i.e. the return value of calling the comparator with those arguments respectively is -1) but clearly the grid thinks otherwise. Could it be I'm missing something regarding the scope of calls to the comparator function?

推荐答案

找出正在排序的某些字符串，它们在字符串的最开头包含一个空格，从而导致它们（正确地）排在数字和字母字符之前。我已经解决了这个问题，只需将 .trim（）附加到要在 StringComparator 中比较的每个值的末尾：

Turns out some of the strings that were being sorted contained a space at the very beginning of the strings, causing them to (properly) be sorted before numerals and alphabetical characters altogether. I've solved this issue by simply appending .trim() to the end of each value being compared in the StringComparator:

export function StringComparator(valueA: string = '', valueB: string = '') {
    const valueALower = valueA.toLowerCase().trim();
    const valueBLower = valueB.toLowerCase().trim();
    return valueALower.localeCompare(valueBLower, 'en', { numeric: true });
}

这篇关于带有ag-grid和字符串单元格的字母数字排序不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！