4

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

4

4 回答 4

3

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

于 2015-04-09T22:43:44.137 回答
0

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

于 2013-10-03T09:16:42.350 回答
0

在不修改 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]
于 2013-11-22T00:08:35.083 回答
-1

看看“服务器端分页”示例，它完全符合您的要求！您可以根据需要切片和切块。

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();
    }
};
于 2014-07-23T19:02:56.763 回答