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

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 に答える
0

おそらく最善の解決策ではありませんが、フッターの上部に合計行を追加することになりました。 https://github.com/mchapman/forms-angular/commit/9f02ba1cdafe050f5cb5e7bb7d26325b08c85ad2

于 2013-10-03T09:16:42.350 に答える