Angular UI-Grid: 如何得到过滤后的项目总数
Angular UI-Grid: How to get number of total items after filtering
我正在使用 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
?
有什么想法吗?
提前致谢:)
$scope.gridOptions = {
....
onRegisterApi: registerGridApi,
....
};
function registerGridApi(gridApi) {
$scope.gridApi = gridApi;
}
获取您的总项目数:
var totalItems = $scope.gridApi.grid.options.totalItems;
您可以使用此解决方法。
var RowsVisible = $(".ui-grid-row").length;
如果有分组就用这个
var RowsVisible = $(".ui-grid-row").length/2;
这将为您提供当前的行数。如果存在分组,那么它将为您提供标题数和可见行数。
你应该避免 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
getVisibleRows() 将 return 可见行数。如果您扩展分组,getVisibleRows() 的大小将相应增加。
$scope.gridApi.core.getVisibleRows().length;
因此上述方法有一些局限性。
您还可以使用以下方法获取总分组行数。
var totalGroupedRows = Object.keys($scope.gridApi.grid.grouping.groupingHeaderCache).length ;
注意 Object.keys() 将不起作用 IE<9.
在我们的应用程序中,我们在页脚中显示了一些列。它不适用于列过滤器。然后我们做了下面的步骤,然后就成功了。
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;
我正在使用 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
?
有什么想法吗? 提前致谢:)
$scope.gridOptions = {
....
onRegisterApi: registerGridApi,
....
};
function registerGridApi(gridApi) {
$scope.gridApi = gridApi;
}
获取您的总项目数:
var totalItems = $scope.gridApi.grid.options.totalItems;
您可以使用此解决方法。
var RowsVisible = $(".ui-grid-row").length;
如果有分组就用这个
var RowsVisible = $(".ui-grid-row").length/2;
这将为您提供当前的行数。如果存在分组,那么它将为您提供标题数和可见行数。
你应该避免 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
getVisibleRows() 将 return 可见行数。如果您扩展分组,getVisibleRows() 的大小将相应增加。
$scope.gridApi.core.getVisibleRows().length;
因此上述方法有一些局限性。
您还可以使用以下方法获取总分组行数。
var totalGroupedRows = Object.keys($scope.gridApi.grid.grouping.groupingHeaderCache).length ;
注意 Object.keys() 将不起作用 IE<9.
在我们的应用程序中,我们在页脚中显示了一些列。它不适用于列过滤器。然后我们做了下面的步骤,然后就成功了。
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;