在 ui- 网格中格式化页脚值

Question

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

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

total: 6370.046074130321

我想

total: 70.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>',

但其中 none 有效。

Answer 1

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

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

否则，您可以使用 custom filter 函数自行过滤 text/value。

在您的模块中添加：

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

在您的 HTML 中添加：

{{valueToFormat | customFilterFunction}}

Answer 2

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

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

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

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

Answer 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'

Answer 4

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

       {
            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>'
        }

Answer 5

我使用 ui-grid - v4.9.1 (2020-10-26)，我有同样的格式问题... col.getAggregationValue() return正确聚合值，但 col.getAggregationText() 没有 return 标签...

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

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

在 ui- 网格中格式化页脚值

Format footer values in ui-grid

javascript

node.js

express

angularjs

angular-ui-grid