Angulargrid中的自定义排序 - 排序不区分大小写

时间:2015-08-23 16:57:03

标签: angularjs sorting angular-grid

我正在使用ag-grid生成一些表格。到目前为止它一直很棒。但是我在排序方面遇到了一些困难,因为我的表有一些小写的数据,我希望我的排序函数忽略大小写并对它们进行排序只是区分大小写。

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

cellRenderer功能:

cellRenderer: function(params) {
    if (params.value=='Police') {
        return 'POLICE';
    } else {
        return params.value.toUpperCase();
    }
}

排序功能:

$scope.sortByAthleteAsc = function() {
    var sort = [
        {field: 'athlete', sort: 'asc'}
    ];
    $scope.gridOptions.api.setSortModel(sort);
};

这是提供的两个例子。如何连接这两个函数以产生我的表格不区分大小写的排序?

3 个答案:

答案 0 :(得分:8)

将比较器放在colDef上。如下:

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

您还可以获得行节点,您可以在其中访问完整的行数据,而不仅仅是col的特定值。

答案 1 :(得分:1)

cellRenderer实际上与排序无关;正如Niall指出的那样,您需要修改列定义以使用自定义排序功能。从example code开始,假设您正在使用第一个示例,因此您对运动员的columnDef看起来像这样:

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

请注意,即使您不必使用它们也会传递节点和isInverted,因为这是ag-grid期望的签名。

如果需要单独处理某些值(如空白或空值),则使用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文档非常有用,但是它所拥有的信息经常分布在几个页面中,并且没有很多例子可以向你显示你需要知道的内容。

答案 2 :(得分:0)

此问题可以通过

解决
   GridOptions.accentedSort = true;