Question

我需要过滤ui-grid数据，但不是来自网格提供的本机标题过滤器，而是点击按钮。

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

有了这个，过滤工作正常。但是在以下情况下我遇到了问题使用外部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底部的计数显示

1 个答案: