Question

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

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

我希望能够在您单击＆＃34;升序/降序排序＆＃34;时按日期过滤列。纽扣。因此，我将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不支持对Date类型列进行排序。

但是，您可以在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-grid不按日期排序

4 个答案: