8

ページングとクライアント側の並べ替えを有効にして ng-grid を使用しています。列ヘッダーをクリックしてデータを並べ替えると、機能します。ただし、現在のページのデータのみを並べ替えます。つまり、各ページをソートします。すべてのデータを並べ替えて、現在のページを表示したい。たとえば、ページ 2 にいて ID で並べ替えると、ID 5、7、10、11、12 のページ 1 が表示され、ページ 2 に移動すると ID 1、2、6、8、9 が表示されます。 . 1ページ目に1,2,5,6,7、2ページ目に8,9,10,11,12を表示したいのですが。どうすればこれを達成できますか？

ありがとう

4

1 に答える 1

14

これが私がこの問題を解決した方法です。基本的な考え方は、すべてのデータを含む配列を手動でソートし、ページネーションを再度行うことです。

並べ替えの初期値を定義する

$scope.sortInfo = {fields: ['id'], directions: ['asc']};

特定のフィールドでデータをソートする関数を定義する

// sort over all data
function sortData (field, direction) {
  if (!$scope.allData) return;
  $scope.allData.sort(function (a, b) {
    if (direction == "asc") {
      return a[field] > b[field] ? 1 : -1;
    } else {
      return a[field] > b[field] ? -1 : 1;
    }
  })
}

を監視し、sortInfo変化に対応する

// sort over all data, not only the data on current page
$scope.$watch('sortInfo', function (newVal, oldVal) {
  sortData(newVal.fields[0], newVal.directions[0]);
  $scope.pagingOptions.currentPage = 1;
  setPagingData($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize)
}, true);

どこsetPagingDataですか

// pick the slice we currently want to see
function setPagingData (page, pageSize){
  if (!$scope.allData) return;
  $scope.totalServerItems = $scope.allData.length;
  $scope.myData = $scope.allData.slice((page - 1) * pageSize, page * pageSize);;
};

gridOptions で sortInfo を設定します

$scope.gridOptions = {
  sortInfo: $scope.sortInfo,
  useExternalSorting: true,
}
于 2013-09-12T16:41:14.900 に答える