Question

我正在使用ng-table而且我遇到了分组问题。我有它可以通过在下拉菜单中选择选项来启用或禁用分组，但是当分组被禁用时，启用分组时总是会打破分页。

以下是我的columns数组中的一个对象的示例：

{
  field: "payeeName",
  title: "Charity",
  sortable: "payeeName",
  filter: {
    payeeName: 'select'
  },
  classes: "td-width-150",
  show: true,
  hideOnExport: true,
  groupable: "payeeName",
  buildTemplate: function(donation, idx) {
    var str = donation.payeeName + '<br/>';
    str += '<small class="text-muted">';
    str += $filter('buildAddressLine')(donation) + '<br/>';
    str += $filter('buildRegistrationId')(donation) + '<br/>';
    if (donation.designation) {
      str += donation.designation;
    }
    str += '</small>';
    return str;
  }
}

以下是打开或关闭分组时显示的行：

<tr class="ng-table-group" ng-show="grouping" ng-repeat-start="group in $groups">
 <td>
    <a href="" ng-click="group.$hideRows = !group.$hideRows">
      <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
      <strong>{{ group.value }}</strong>
    </a>
  </td>
</tr>
<tr ng-show="grouping" ng-hide="group.$hideRows" ng-repeat="user in group.data" ng-repeat-end>
  <td ng-repeat="col in $columns track by $index" class="{{col.classes}}" {{col.hide}} ng-bind-html="col.buildTemplate(user, $index)"></td>
</tr>
<tr ng-show="!grouping" ng-repeat="user in $data">
  <td ng-repeat="col in cols track by $index" class="{{col.classes}}" {{col.hide}} ng-bind-html="col.buildTemplate(user, $index)"></td>
</tr>

最后，这是为表准备数据的函数。应该知道，在此代码下面是一个API调用，它将$ scope.donations设置为等于端点返回的值：

var prepData = function(checkFilter) {
  var orderFilter = params.filter();
  // add grid filters to the data we loaded in get data
  var filteredData = params.filter() ? $filter('filter')($scope.donations, params.filter()) : $scope.donations;
  // apply the global filter

  filteredData = $filter('filter')(filteredData, $scope.globalTableFilter);


  var orderedData = params.sorting() ?
    $filter('orderBy')(filteredData, params.orderBy()) :
    filteredData;

  orderedData = $filter('filter')(orderedData, $scope.filterDonation);

  // Prep data for export
  $scope.exportData = angular.copy(orderedData);
  $scope.exportData.forEach(function(e) {
    e.donationDate = $filter('date')(e.donationDate, 'dd/MM/yyyy');
    e.receiptAmount = $filter('currency')(e.receiptAmount);
  });
  // recalc the pagination - MUST PRECEED THE PAGE SLICE

  params.total(orderedData.length);
  $scope.$emit('gotDonations', $scope.orderedData);

  $scope.filterDonations = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
  return $scope.filterDonations;

};

当通过选择输入启用分组时，它会触发一个类似于$scope.tableDonationParams.group({payeeName: 'asc'})的功能当通过选择输入禁用分组时，它会触发：
$scope.tableDonationParams.group({})

就像我说的那样，只要将分组设置为空白对象，分页就可以正常工作，但在启用时会完全中断。

以下是我的表格图片，仅为了清晰起见：http://imgur.com/f6WyksA

我集成了一个名为angular-dragdrop的插件，允许我将项目从侧边栏拖动到表格中以添加到列对象中，还可以将列拖到彼此之间以更改它们在桌面上的位置，因此不要让那个让你感到困惑。

感谢您的帮助。

Answer 1

我在分组数据时遇到同样的问题。所以，我在 getGroups 函数[ng-table.js]的末尾添加了这些行。

if (!settings.dataOptions.applyPaging) {
    return ngTableDefaultGetData(result, params);
}
return ngTableDefaultGetData.applyPaging(result, params);

使用默认或自定义的分页。

在ng-table中启用分组会删除分页

1 个答案: