角度UI-グリッドは、私はUI-グリッドを使用しています日付

Question

によるソートではない、と私はそうのようなJS日付オブジェクトの束持っている：私はとき日付で列をフィルタリングすることができるようにしたい

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

を「昇順/降順ソート」ボタンをクリックします。そのため、私はそうのようなアップ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