Question

如果我有列（名称，数量），我如何最好地创建显示的行/页脚（“总计”，8877）？显然，你可以通过在数据中添加一行来实现，但这会破坏排序功能。按名称分组并显示每个名称的数量似乎相对容易，但我还没有找到如何做更简单的情况（尽管我发现其他人要求 - 例如https://github.com/angular-ui/ng-grid/issues/679）

Answer 1

您可以在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来做你想做的任何事情。

Answer 2

很可能不是最好的解决方案，但我最终在页脚顶部添加了一个总计行。 https://github.com/mchapman/forms-angular/commit/9f02ba1cdafe050f5cb5e7bb7d26325b08c85ad2

Answer 3

无需修改网格，您可以只提供自己的页脚模板，以某种方式获取每列的总计。在我的情况下，当我从服务器数据“”构建“”表时，我也累积了总计哈希值。

我的模板如下所示：

    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]

Answer 4

查看＆＃34;服务器端分页＆＃34;例如，它正是你想要的！你可以根据自己的需要切片和切块。

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();
    }
};

在ng-grid中进行列总计的最佳方法是什么？

4 个答案: