带有ag-grid和字符串单元格的字母数字排序不一致

Question

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

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

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

列定义：

        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 });
}

排序不一致的可视示例：

给定上面的屏幕截图：比较器的手动测试表明，字符串“ 4'x 8'x 16'（Dragline Mat）”应位于“ Construction Crew“ Move Around”-Tie-Ins“（即调用的返回值）之前具有这些参数的比较器分别为-1），但显然网格认为不是。难道我缺少关于比较器函数调用范围的信息吗？

Answer 1

找出要排序的某些字符串，在字符串的开头包含一个空格，使它们（正确地）在数字和字母字符之前进行排序。我已经解决了这个问题，只需将<my_carbon class_id="0" tracking_level="0" version="0"> <number>6</number> <symbol>C</symbol> <AR_electronegativity class_id="1" tracking_level="0" version="0"> <has_value>1</has_value> <value>2.50000000000000000e+00</value> </AR_electronegativity> <covalent_radius class_id="2" tracking_level="0" version="0"> <has_value>1</has_value> <value class_id="3" tracking_level="0" version="0"> <value>7.60000000000000009e-01</value> </value> </covalent_radius> ... 附加到在.trim()中比较的每个值的末尾：

StringComparator