Angularjs Angulargrid中的自定义排序-排序大小写不敏感

我正在使用ag网格生成一些表。到目前为止，一切都很好。但是我在排序时遇到了一些困难，因为我的表中有一些小写的数据，我希望我的排序函数忽略大小写，对它们进行排序时只区分大小写

可以完成这项工作的两个功能是cellRenderer和sort函数

cellRenderer函数：

排序功能：

---

这是提供的两个示例。如何连接这两个函数以生成不区分大小写的表排序？

在colDef上放置一个比较器。例如：

colDef.comparator = function(valueA, valueB, nodeA, nodeB) {
    // here valueA and valueB are the items to be compared
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
}

---

还为您提供了行节点，您可以在其中访问完整的行数据，而不仅仅是特定于列的值。

cellRenderer实际上与排序无关；正如Niall指出的，您需要修改列定义以使用自定义排序函数。从中，假设您正在使用第一个示例，那么您的运动员专栏def如下所示：

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc'},
    ...
];

您需要向该columnDef添加一个比较器：

    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc', 
        comparator: function(valueA, valueB, nodeA, nodeB, isInverted)
        {return caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted);}
    }

然后在下面添加排序功能

function caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted) {
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
}

请注意，您传递节点并进行转换，即使您不必使用它们，因为这是ag grid所期望的签名

如果需要单独处理某些值，如空格或null，则可以使用isInverted标志。下面是一个更详细的函数，它将这些值排序到底部，而不考虑方向：

function caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted) {
    if( valueA === "" || valueA === null ) {
        if( valueB === "" || valueB === null ) {
            return 0;   // a and b are both blank; 0 means identical
        } else {
            return (isInverted ? -1 : 1);  // a is null, b is not; return 1 for normal sort or -1 for inverted
        }
    }
    if( valueB === "" || valueB === null ) {
        return (isInverted ? 1 : -1);   // b is null, a is not; return -1 for normal or 1 for inverted to get the opposite result as above
    }
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
};

您还可以将该比较器设置为列类型的一部分，然后将列类型应用于columnDef；这样，您就可以轻松地跨多个列使用相同的排序函数

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc', type: 'text'},
    ...
];

var gridOptions = {
    columnDefs: columnDefs,
    ... // whatever else you set
    columnTypes: {
        "text": {comparator: function(valueA, valueB, nodeA, nodeB, isInverted) 
            {return caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted);}
    }
};

---

我有一个非常复杂的例子，我刚刚在我目前的工作项目中使用过；如果时间允许，我会缩小范围，让你看看整个过程是如何运作的。一旦你知道你在做什么，ag grid文档是非常有用的，但是它所包含的信息经常被分散在几页纸上，并且没有多少例子能准确地告诉你你需要知道什么。

这个问题可以通过

   GridOptions.accentedSort = true;

---

如果希望在默认情况下启用排序，则除了比较器之外，还要添加

sort:'desc'

或

sort:'asc'

property@Niall克罗斯比：你能提供一个朋克来证明你的答案吗？这会很有帮助。这对日期或数字不起作用。我一直在努力实现这种自定义排序和你的

caseInsensitiveSort

正是我所需要的！非常感谢你！你帮我省去了更多的挫折。非常感谢。

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc', type: 'text'},
    ...
];

var gridOptions = {
    columnDefs: columnDefs,
    ... // whatever else you set
    columnTypes: {
        "text": {comparator: function(valueA, valueB, nodeA, nodeB, isInverted) 
            {return caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted);}
    }
};

   GridOptions.accentedSort = true;