如何在 ag-grid 中编写自定义排序？答案

【问题标题】：How to write custom Sorting in ag-grid?如何在 ag-grid 中编写自定义排序？
【发布时间】：2016-06-15 05:00:10
【问题描述】：

我有一个按字母数字排序的自定义排序功能。我已将其设置为 ag-grid 中提到的比较器，但是我发现它不起作用。请点亮。

var naturalSort = function(valueA, valueB, nodeA, nodeB, isInverted) {

      var NUMBER_GROUPS = /(-?\d*\.?\d+)/g;

      var aa = String(valueA).split(NUMBER_GROUPS),
        bb = String(valueB).split(NUMBER_GROUPS),
        min = Math.min(aa.length, bb.length);

      for (var i = 0; i < min; i++) {
        var x = parseFloat(aa[i]) || aa[i].toLowerCase(),
          y = parseFloat(bb[i]) || bb[i].toLowerCase();
        if (x < y) return -1;
        else if (x > y) return 1;
      }

      return 0;
    };

var columnDefs = [
    {headerName: "Name", field: "name", width: 110, comparator: naturalSort}

];


var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true
};

【问题讨论】：

根据你做的很好的文档，这可能是别的东西。要么你的排序没有正确实现，要么是其他东西使它不起作用。如果您使用 angularjs，请不要忘记在使用 controllerAs 语法时将 gridOptions 绑定到您的 $scope 对象或控制器。
你可以试试比较器：naturalSort.bind(this) 吗？

标签： angularjs sorting columnsorting ag-grid

【解决方案1】：

当我尝试使用比较器功能时，所有参数都显示为“未定义”。无法提供要比较的值甚至节点，因为据我所知，naturalSort 函数在渲染网格时只执行一次。

对于您需要对排序进行的任何更改，请将完整的 rowData 提供给自然排序函数。然后为每一行返回您希望使用排序的值。

var columnDefs = [{
    field: "totalIncVat",
    headerName: translations.totalIncVAT,
    template: '<div title="{{data.totalIncVat | currency:\'&pound;\'}}"> {{data.totalIncVat | currency:\'&pound;\'}}</div>',
    comparator: naturalSort($scope.transactionsData)
}]

//componsate/reverse template alteration to actual field for correct sorting
var naturalSort = function(gridDataArray){
    _.forEach(gridDataArray, function(transaction){
        return gridDataArray.totalIncVat;
    });
};  

$scope.gridOptions = _.defaults({
    rowData: $scope.gridDataArray,
    columnDefs: columnDefs
});

【讨论】：