设置ui网格中页脚值的格式

Format footer values in ui-grid

本文关键字：格式 ui 网格 设置      更新时间：2023-09-26

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

用我的号码，我得到了像一样可怕的东西

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

但它们都不起作用。

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

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

由于您想要两个小数，这将更像{{col.getAggregationValue() | number: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>'
        }

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

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

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

否则，您可以使用自定义筛选函数来自己筛选文本/值。

在您的模块中添加：

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

在HTML中添加：

{{valueToFormat | customFilterFunction}}

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

在一些调试会话之后，我在col.treeAggregation.label中检索标签，并且我的模板是：

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