在ng-grid中做列总数的最佳方法是什么？

Question

如果我有列（名称，数量），我该如何最好地创建显示（“总计”，8877）的行/页脚？显然你可以通过向数据添加一行来完成，但是这会破坏排序功能。它看起来比较容易按名称分组，并显示每个名称的数量，但我还没有找到如何做更简单的情况（虽然我发现其他人问 - 例如https://github.com/angular-ui/ng-grid/issues/679）

Answer 1

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

Answer 2

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

我的模板看起来是这样的：

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 3

取看一下“服务器端分页”示例，它正是你想要的！你可以根据你需要切片和切块。

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

Answer 4

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