原文：105 Footer
表格页脚
UI-Grid 支持页脚，可以设置showGridFooter 选项设置为true（默认为false）显示。页脚显示网格中的总行数和已筛选行数。如果开启了 ui-grid-selection 功能，将显示选定行。
列脚注
UI-Grid 也支持列脚注，您可以为每个列设置聚合函数或使用自定义页脚模板显示您希望聚合的内容。支持的聚合函数是：和，平均数，行数，最小，最大。使用aggregationTypes需要在控制器中注入uiGridConstants 。也可以传递函数来创建自己的聚合逻辑。如果在columnDef中设置aggregationHideLabel: true，可以取消列脚注的标签。可以参照下面例子中的第三列。
注意，聚合只是统计可见行，它会显示可见年龄的总和。出于这个原因，它不能很好地结合其他功能来改变可见行，特别是在分页、分组中。在分页的情况下，你会发现它只显示了当前页面的总数。分组统计当前的数据总数，可能不如预期的直观。
在分组的情况下，解决方案是使用 aggregation 提供的分组。
可以通过gridOptions.footerTemplate自定义页脚模板样式。
- index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/release/ui-grid.css"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<button id="footerButton" class="btn btn-success" ng-click="toggleFooter()">Toggle Grid Footer</button>
<button class="btn btn-success" ng-click="toggleColumnFooter()">Toggle Column Footer</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
</body>
</html>
- main.css
.grid {
width: 100%;
height: 250px;
}
- app.js
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope','uiGridConstants', '$http', function ($scope, uiGridConstants, $http) {
var data = [];
$scope.gridOptions = {
showGridFooter: true,
showColumnFooter: true,
enableFiltering: true,
columnDefs: [
{ field: 'name', width: '13%' },
{ field: 'address.street',aggregationType: uiGridConstants.aggregationTypes.sum, width: '13%' },
{ field: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, aggregationHideLabel: true, width: '13%' },
{ name: 'ageMin', field: 'age', aggregationType: uiGridConstants.aggregationTypes.min, width: '13%', displayName: 'Age for min' },
{ name: 'ageMax', field: 'age', aggregationType: uiGridConstants.aggregationTypes.max, width: '13%', displayName: 'Age for max' },
{ name: 'customCellTemplate', field: 'age', width: '14%', footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' },
{ name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max }
],
data: data,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
$scope.toggleFooter = function() {
$scope.gridOptions.showGridFooter = !$scope.gridOptions.showGridFooter;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
};
$scope.toggleColumnFooter = function() {
$scope.gridOptions.showColumnFooter = !$scope.gridOptions.showColumnFooter;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
};
$http.get('http://ui-grid.info/data/500_complex.json')
.success(function(data) {
data.forEach( function(row) {
row.registered = Date.parse(row.registered);
});
$scope.gridOptions.data = data;
});
}]);
