在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中自定義排序 - 排序不區分大小寫

回答

相關問題