如何重置 ui-grid 底部的计数显示

Question

我需要过滤 ui-grid 数据，但不是来自网格提供的原生 header 过滤器，而是单击按钮。

所以在我的 Filter 按钮的侦听器上，我过滤了我的原始数据数组和 re-assigning $scope.gridData object 的过滤条目。我也有一个 reset 按钮。单击重置我 re-assign 原始数据数组到 $scope.gridData object.

有了这个过滤就可以正常工作了。但是我在以下情况下遇到问题：使用外部 Filter 按钮过滤数据。内部（网格过滤器）过滤器应用于列。使用 Reset 按钮重置数据。

在此重置中，网格保留由内部过滤器过滤的条目。但是在行数显示中，网格显示 n-10 out of total items。这里的总项是原始数据数组的计数，而网格当前包含过滤后的数据。

他们有没有办法手动更改网格计数显示。

Answer 1

如果我没理解错的话，您可以覆盖 ui-grid 页脚并进行调整：

var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', function($scope) {
  var adjustedGridFooterTemplate =
    //same as normal template, but with:  + ' (+/- my adjustment)' AND  + ' (+/- another adjustment)'
    "<div class=\"ui-grid-footer-info ui-grid-grid-footer\"><span>{{'search.totalItems' | t}} {{grid.rows.length + ' (+/- my adjustment)'}}</span> <span ng-if=\"grid.renderContainers.body.visibleRowCache.length !== grid.rows.length\" class=\"ngLabel\">({{\"search.showingItems\" | t}} {{grid.renderContainers.body.visibleRowCache.length + ' (+/- another adjustment)'}})</span></div>";
  $scope.gridOptions = {
    enableFiltering: true,
    showGridFooter: true,
    gridFooterTemplate: adjustedGridFooterTemplate,
    data: [{name: "Moroni", age: 50},
           {name: "Tiancum", age: 43},
           {name: "Jacob", age: 27}]
  }
}]);

div[ui-grid] {
  height: 200px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <div ui-grid="gridOptions" class="gridStyle">
  </div>
</div>

更新（来自下方评论）

当您说重新分配 $scope.gridData 时，请确保您使用 angular.copy() 进行重新分配，例如 $scope.gridData = angular.copy(newData);，因为它会确保内部网格监视也重新开火。

希望对您有所帮助，如果您有任何其他问题，请告诉我。

如何重置 ui-grid 底部的计数显示

How to reset the count display at the bottom of ui-grid

angular-ui-grid

ui-grid