Angular UI-网格未按日期排序

Question

我正在使用 UI-grid，我有一堆 JS 日期对象，如下所示：

"dob": new Date('1942-11-19')

我希望能够在您单击 "sort ascending/descending" 按钮时按日期过滤列。因此，我将 colDef 设置如下：

      {
        field: 'dob'
        , displayName: 'D.O.B.'
        , width: '130'
        , editableCellTemplate: '<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD" style="border-bottom-color: #74B3CE; border-bottom-width: 2px;"></form></div>'
        , headerCellClass: $scope.highlightFilteredHeader
        , cellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)| date:\'MM-dd-yyyy\'}}</div>'
        , cellFilter: 'date'
        , type: 'date'
      },

但是，该列根本没有正确排序。我什至尝试设置一个函数来从外部按钮对其进行排序，如下所示：

      function mostRecent(){
        console.log('clicked mostRecent');
        $scope.gridApi.grid.sortColumn(
          $scope.gridApi.grid.getColumn('dob'), uiGridConstants.DESC
        );
        $scope.gridApi.grid.notifyDataChange(uiGridConstants.dataChange.ALL); //this line updates the rest of the columns accordingly
      };

但它也会导致不正确的混乱排序。有谁知道问题是什么？我认为这可能与我的 cellTemplate 有关，但删除模板后，没有任何区别...

Answer 1

是的，你是对的，ui-grid 不支持日期类型列的排序。

但是您可以在 columnDef 中定义一个 sortingAlgorithm。

列定义应如下所示：

...

columnDefinition.sortingAlgorithm = function (firstDateString, secondDateString) {
  var dateFormat = 'YYYY-MM-DD';
  return function (firstDateString, secondDateString, dateFormat) {
    if (!firstDateString && !secondDateString) {
      return 0;
    }

    if (!firstDateString) {
      return 1;
    }

    if (!secondDateString) {
      return -1;
    }

    var firstDate = $window.moment(firstDateString, dateFormat);
    if (!firstDate.isValid()) {
      throw new Error('Invalid date: ', firstDateString);
    }

    var secondDate = $window.moment(secondDateString, dateFormat);
    if (!firstDate.isValid()) {
      throw new Error('Invalid date: ', secondDateString);
      }

    if (firstDate.isSame(secondDate)) {
      return 0;
    } else {
      return firstDate.isBefore(secondDate) ? -1 : 1;
    }
  };
};

...

请注意，在此示例中使用了 Moment.js。这是一个非常有用的库，因此您可能还会在项目中的另一个地方找到使用它的地方。

Answer 2

$scope.gridOptions = { 
  data: 'gridData',
   columnDefs: [
    {field: 'name', displayName: 'Name'}, 
    {field:'age', 
     displayName:'Birth Date',
     sortFn: function (aDate, bDate) {
       var a=new Date(aDate);
       var b=new Date(bDate);
       if (a < b) {
         return -1;
       }
       else if (a > b) {
         return 1;
       }
       else {
         return 0;
       }
     }
       }]
};

试试这个 http://plnkr.co/edit/0VD3X5YvuNSWAZlig95X?p=info

参考： https://github.com/angular-ui/ui-grid/issues/222

Answer 3

您可以为 UI 网格中的日期字段定义排序算法，如下所示

columnDefs: [
{
                    field: 'DateFrom', displayName: 'From',
                    sortingAlgorithm: function (aDate, bDate, rowA, rowB, direction) {
                        var a = new Date(moment(aDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
//here DD-MM-YYYY is the current format in which the dates are returned 
                        var b = new Date(moment(bDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
                        if (a < b) {
                            return -1;
                        }
                        else if (a > b) {
                            return 1;
                        }
                        else {
                            return 0;
                        }
                    }

                }
]

Answer 4

我们可以用最简单的方式对包含日期字段的 ui-grid 列进行排序。以这种方式使用 cellTemplate：

{
  name: "Date",
  field: 'date',
  cellTemplate:'<div>{{row.entity.date | date:"dd/MM/yyyy"}}</div>' 
 },

因此，您可以为日期选择任何格式，例如。日期：dd-MM”等

Angular UI-网格未按日期排序

Angular UI-grid not sorting by date

angular-ui-grid