在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來做你想做的任何事情。