如何重置用户界面网格底部的计数显示

Question

我需要过滤ui网格数据，但不是从网格提供的本机标头过滤器中过滤，而是按一下按钮。

因此，在我的Filter按钮的侦听器上，我过滤我的原始数据数组，并将过滤后的条目重新分配给$scope.gridData对象。我也有一个reset按钮。在单击“重置”时，我重新将原始数据数组分配给$scope.gridData对象。

有了这个，过滤就可以了。但是，当使用外部Filter按钮过滤数据时，我将面临一个问题。内部(网格过滤器)过滤器应用于列。使用Reset按钮重置数据。

在此重置中，网格维护由内部筛选器筛选的条目。然而，在行计数显示中，网格显示n-10 out of total items。此处的总项是原始数据数组的计数，而网格当前保存已过滤的数据。

是他们手动更改网格计数显示的任何方式。

Answer 1

如果我对您的理解正确，您可以重写ui-网格页脚并进行调整：

​

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);，因为它将确保内部网格监视也重新启动。

希望这有帮助，如果你还有其他问题，请告诉我。