在 ui-grid 中格式化页脚值答案

【问题标题】：Format footer values in ui-grid在 ui-grid 中格式化页脚值
【发布时间】：2015-07-30 10:42:15
【问题描述】：

如何格式化 ui-grid 中列的聚合值？

有了我的数字，我得到了一些可怕的东西，比如

total: 6370.046074130321

当我想要的时候

total: $6370.05

我都试过了：

footerCellTemplate: '<div class="ui-grid-cell-contents" >{{COL_FIELD | currency}}</div>',

和

footerCellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col) | currency}}</div>',

但它们都不起作用。

【问题讨论】：

标签： javascript angularjs node.js express angular-ui-grid

【解决方案1】：

您尝试过的模板适用于正常的单元格值，但您正在尝试使模板适用于聚合值。

要获取模板内列的聚合值，您可以使用 {{col.getAggregationValue()}} 并添加格式选项。

因为你想要两位小数，这更像是{{col.getAggregationValue() | number:2 }}

还请记住，如果您在网格上启用了列过滤器，则模板会有所不同。

【讨论】：

【解决方案2】：

如果您需要小数点后显示两个值，请在网格选项中使用自定义模板功能

       {
            field: 'ORGINAL_FUNC_AMOUNT',
            displayName: 'CR A/C',
            aggregationType: uiGridConstants.aggregationTypes.sum,
            footerCellTemplate: '<div class="ui-grid-cell-contents" >Total: {{col.getAggregationValue() | number:2 }}</div>'
        }

【讨论】：

【解决方案3】：

$templateCache.put('ui-grid/uiGridFooterCell',
"<div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\"><div>{{ col.getAggregationText() + ( col.getAggregationValue() CUSTOM_FILTERS ) }}</div></div>"  );

CUSTOM_FILTERS = footerCellFilter 属性 grid.colDef[0].footerCellFilter = 'number:2'

【讨论】：

【解决方案4】：

您可以使用number 过滤器来选择您需要的小数位数。

{{'$' + valueToFormat | number:2}}

否则，您可以使用custom filter 函数自己过滤文本/值。

在你的模块中添加：

.filter('customFilterFunction', function() {
return function(input) {
    var out = "";
    out = '$' + parseFloat(input).toFixed(2);
    return out;
  };
})

在您的 HTML 中添加：

{{valueToFormat | customFilterFunction}}

【讨论】：

我需要的是valueToFormat。正如您从我最初的问题中看到的那样，我已经这样做了（| 货币），但我使用的是 COL_FIELD，这似乎不正确。

【解决方案5】：

我使用 ui-grid - v4.9.1 (2020-10-26)，我也有同样的格式问题...col.getAggregationValue() 返回 rigth 聚合值，但 col.getAggregationText() 不返回标签...

经过一些调试会话，我在col.treeAggregation.label 中检索标签，我的模板也是：

colDef.footerCellTemplate = '<div class="ui-grid-cell-contents cellAlignRight" >{{col.treeAggregation.label}} {{  ( col.getAggregationValue()  | number: 2) }}</div>'

【讨论】：