6

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

可以完成这项工作的两个功能是 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);
};

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

4

3 回答 3

9

将比较器放在 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 的值。

于 2015-09-02T20:42:37.523 回答
4

这个问题可以通过 

   GridOptions.accentedSort = true;
于 2019-02-13T15:28:43.273 回答
3

cellRenderer 实际上与排序没有任何关系；正如 Niall 指出的那样，您需要修改列定义以使用自定义排序功能。在示例代码中，假设您正在使用第一个示例，因此运动员的 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 文档就非常有用，但是它所包含的信息经常分散在几个页面中，并且没有多少示例可以准确地向您展示您需要了解的内容。

于 2017-08-28T16:55:57.953 回答