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

我正在使用ag-grid生成一些表格。到目前为止，它一直很棒。但是我在排序时遇到了一些困难，因为我的表有一些小写的数据，我希望我的排序功能可以忽略这种情况，并对它们进行排序只是区分大小写。在Angulargrid中自定义排序 - 排序不区分大小写

可以完成这项工作的两个功能是cellRenderer和排序功能。

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

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

来源

2015-08-23 rjl

将比较器放到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-02 20:42:37

如果您希望默认启用排序，除比较器属性外，还可以添加'sort：'desc''或'sort：'asc'' –

@Niall Crosby：您能否提供一个punker来演示您的答案？帮助很多。 – Developer

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文档就非常有用，但是它所包含的信息经常分布在多个页面中，并没有太多的例子能够向你显示你需要知道的内容。

来源

2017-08-28 16:55:57

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

回答

相关问题