Angular UI-Grid: 如何得到过滤后的项目总数

Question

我正在使用 UI 网格来显示一些数据。其中一列是文本，所以我有 'contains' 过滤效果很好。

我也在用分页。 UI-Grid 的右角显示如下内容：

1 - 23 of 23 items

在我的页面功能（angular 控制器端）中，我需要 return 项目总数，特别是该行的最后一个“23”。我在文档中找不到除此之外的任何内容（来自文档）：

GridOptions (api in module ui.grid.pagination )

totalItems Total number of items, set automatically when client side pagination, needs set by user for server side pagination"

所以我尝试使用 $scope.gridOptions.totalItems 但不幸的是，当页面首次加载时它总是 returns 0。

我的解决方法是使用 data.length，它可以满足我的需要。经过进一步测试，虽然我意识到在使用过滤后，分页页脚上的总项目数变为匹配结果的总和。我还没有找到另一种获取该号码的方法。

还有一件事：过滤完成后是否会触发一个事件，以便我可以检查 $scope.gridOptions.totalItems？

有什么想法吗？提前致谢:)

Answer 1

$scope.gridOptions = {
    ....
    onRegisterApi: registerGridApi,
    ....
};

function registerGridApi(gridApi) {
            $scope.gridApi = gridApi;
}

获取您的总项目数：

var totalItems = $scope.gridApi.grid.options.totalItems;

Answer 2

您可以使用此解决方法。

var RowsVisible = $(".ui-grid-row").length;

如果有分组就用这个 var RowsVisible = $(".ui-grid-row").length/2;

这将为您提供当前的行数。如果存在分组，那么它将为您提供标题数和可见行数。

Answer 3

你应该避免 jQuery（正如另一个 post 所建议的那样），而是与 API 互动。

您首先需要在网格创建事件中保存对 API 的引用。

$scope.gridOptions = {
    ....
    onRegisterApi: registerGridApi,
    ....
};
function registerGridApi(gridApi) {
    $scope.gridApi = gridApi;
}

你应该已经知道总行数了。

您可以获得 visible/filtered 行数：

gridApi.core.getVisibleRows().length

或

gridApi.grid.getVisibleRows().length

您可以通过以下方式获取所选行数：

gridApi.selection.getSelectedRows().length

Answer 4

getVisibleRows() 将 return 可见行数。如果您扩展分组，getVisibleRows() 的大小将相应增加。

  $scope.gridApi.core.getVisibleRows().length;

因此上述方法有一些局限性。

您还可以使用以下方法获取总分组行数。

 var totalGroupedRows = Object.keys($scope.gridApi.grid.grouping.groupingHeaderCache).length ;

注意 Object.keys() 将不起作用 IE<9.

Answer 5

在我们的应用程序中，我们在页脚中显示了一些列。它不适用于列过滤器。然后我们做了下面的步骤，然后就成功了。

i.$scope.gridOptions = {
    columnDefs: $scope.columnDefs,
    onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
}
ii. calling below template in the footer
footerCellTemplate: '<div class="footer-class" style="text-align:right;margin-right: 5px;" >{{grid.appScope.getTotalofcolumn(grid) | currency:number:0}}</div>',
iii. inside getTotalofcolumn used below line for rows                       
$scope.gridApi.core.getVisibleRows();

$scope.totalValues =$scope.gridApi.core.getVisibleRows();
                    $scope.Total = 0
                    angular.forEach($scope.totalValues,function(value,key){
                        $scope.Total +=  value.entity.TotalCOLUMNVALUE/NAME;
                    }); 
                    return $scope.Total;

Angular UI-Grid: 如何得到过滤后的项目总数

Angular UI-Grid: How to get number of total items after filtering

angularjs

visible

angular-ui-grid