Question

如何格式化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>',

但它们都不起作用。

Answer 1

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

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

由于您希望有两位小数，因此更像{{col.getAggregationValue() | number:2 }}

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

Answer 2

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

'use strict';

describe('S3 test', function() {
    it.only('S3 test 1', function(done) {
        var AWS = require('aws-sdk');
        //AWS.config.region = 'us-west-2';
        var s3 = new AWS.S3({
            params: {
                Bucket: 'mkruk-myBucket',
                Key: 'myKey'
            }
        });
        s3.createBucket(function(err) {
            if (err) {
                console.log("Error:", err);
                done();
            } else {
                s3.upload({
                    Body: 'Hello!'
                }, function() {
                    console.log("Successfully uploaded data to myBucket/myKey");
                    done();
                });
            }
        });
    });
});

Answer 3

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

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

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

在您的模块中添加：

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

在您的HTML中添加：

{{valueToFormat | customFilterFunction}}

Answer 4

$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 =＆＃39; number：2＆＃39;

Answer 5

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

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

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

在ui-grid中格式化页脚值

5 个答案: