Angular UI-grid Sortierung nicht nach Datum

Question

I UI-grid verwenden, und ich habe eine Reihe von JS Datum Objekten wie so:

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

Ich mag die Spalte nach Datum filtern können, wenn Sie Klicken Sie auf die Schaltflächen "aufsteigend/absteigend sortieren". Als solche habe ich die colDef up wie so gesetzt:

 { 
     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' 
     }, 

jedoch die Spalte einfach nicht richtig sortiert. Ich habe sogar versucht, eine Funktion zum Einrichten es von einer externen Taste sortieren, wie so:

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

Aber es verursacht auch einen mish-Brei Art, die nicht korrekt ist. Weiß jemand, was das Problem ist? Ich dachte, es könnte mit meinem cellTemplate zu tun haben, aber nach dem Entfernen der Vorlage gab es keinen Unterschied ...

Answer 1

Ja, Sie haben Recht, ui-Grid unterstützt keine Sortierung von Datum Spalten.

Sie können jedoch eine sortingAlgorithm in der columnDef definieren.

Hier ist, wie Sie Ihre Spaltendefinition sollte folgendermaßen aussehen:

... 

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

... 

Sie bitte, dass in diesem Beispiel beachten Moment.js verwendet wird. Es ist eine sehr nützliche Bibliothek, so dass Sie möglicherweise auch einen anderen Ort in Ihrem Projekt finden, wo Sie es verwenden können.

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

Versuchen Sie, diese http://plnkr.co/edit/0VD3X5YvuNSWAZlig95X?p=info

Referenz: https://github.com/angular-ui/ui-grid/issues/222