Как лучше всего подсчитать итоги столбцов в ng-grid?

Вы можете включить собственный шаблон нижнего колонтитула в gridOptions. Я искал форматирование нижнего колонтитула по умолчанию в исходном коде и скопировал его, но добавил функцию, которая вычисляет итоги. Что-то вроде этого:

$scope.gridOptions = {
data: 'hereGoesTheData',
columnDefs : [list of your column names],
showFooter: true,
footerTemplate: 
'<div ng-show="showFooter" class="ngFooterPanel" ng-class="{\'ui-widget-content\': jqueryUITheme, \'ui-corner-bottom\': jqueryUITheme}" ' +
'ng-style="footerStyle()"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}} " ng-cell style="text-align:right;">' +
'{{getTotal(col.field)}}</div></div>'
};

А затем определите $scope.getTotal, чтобы он делал все, что вы хотите.

Возможно, это не лучшее решение, но в итоге я добавил итоговую строку вверху нижнего колонтитула. https://github.com/mchapman/forms-angular/commit/9f02ba1cdafe050f5cb5e7bb7d26325b28c8>5ad

без изменения сетки ng вы можете просто предоставить свой собственный шаблон нижнего колонтитула, который каким-то образом получает общее количество для каждого столбца. В моем случае, когда я «собираю» таблицу из данных сервера, я также накапливаю хэш итогов.

Мой шаблон выглядит так:

    total_cell_footer = """
<div ng-show="showFooter" class="ngFooterPanel" ng-class="{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}" ng-style="footerStyle()">
    <div class="ngTotalSelectContainer" >
            <div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}">
                <span class="ngCellText">{{ get_total(col) | currency:"$"}} </span>
            <div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>
        </div>
    </div>
</div>
    """

Функция get_total определена в моей области (которая является родителем области ngGrid, следовательно, унаследована) следующим образом:

    $scope.get_total= (col) ->
    # used by the footer template to access column totals.
    $scope.totals[col.field]

Взгляните на пример «Пейджинг на стороне сервера», в нем есть именно то, что вам нужно! Вы можете нарезать и нарезать кубиками в зависимости от того, что вам нужно.

http://angular-ui.github.io/ng-grid/

в настройках сетки поставь

enablePaging: true,

        showFooter: true,
        showFilter: true, 

        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,

и наверху

$scope.pagingOptions = {
        pageSizes: [100, 500, 1000],
        pageSize: 100,
        totalServerItems: 0,
        currentPage: 1
    };
$scope.setPagingData = function (data, page, pageSize) {

    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.myData = pagedData;
    **$scope.pagingOptions.totalServerItems = data.length**;
    if (!$scope.$$phase) {


        $scope.$apply();
    }
};