15

我有大量的数字数据。这需要呈现为逗号分隔值。对于前。 123456.78被渲染为123,457使用 Ag-Grid。请帮助我实现这一目标。

4

3 回答 3

19

根据单元格渲染流程文档（此处），您可以使用 colDef.valueFormatter，如下所示：

    var columnDefs = [
        {headerName: "Number", field: "number"},
        {headerName: "Formatted", field: "number", valueFormatter: currencyFormatter}
    ];
    
    function currencyFormatter(params) {
        return '£' + formatNumber(params.value);
    }
    
    function formatNumber(number) {
        // this puts commas into the number eg 1000 goes to 1,000,
        // i pulled this from stack overflow, i have no idea how it works
        return Math.floor(number).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
    }

您也可以使用其他帖子描述的 cellRenderer，但这通常用于更复杂的渲染，而 valueFormatter 专门用于这种情况。从 ag-grid文档中：

valueFormatter 用于文本格式化。当您想要在单元格中包含 HTML 标记和潜在功能时，cellRenderer 就可以使用。因此，例如，如果您想将标点符号放入一个值中，请使用 valueFormatter，如果您想放入按钮或 HTML 链接，请使用 cellRenderer。可以使用两者的组合，在这种情况下 valueFormatter 的结果将被传递给 cellRenderer。

于 2017-08-09T17:46:10.597 回答
15 
{
         headerName: 'Salary', field: 'sal'
        cellRenderer: this.CurrencyCellRenderer
       }

private CurrencyCellRenderer(params:any) {

    var usdFormate = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 4
    });
    return usdFormate.format(params.value);
}

像这些我们可以在 Angular2 Typescript 代码中提到。

于 2016-12-12T06:16:28.387 回答
3

您可以通过编写“customcellRenderer”来做到这一点，当您创建列定义时，为“cellRenderer”属性提供函数并在渲染器中使用数字过滤器，类似这样

var colDef = {
    name: 'Col Name',
    field' 'Col Field',
    cellRenderer: function(params) {
        var eCell = document.createElement('span');
        var number;
        if (!param.value || !isFinite(param.value)) {
            number = '';
        } else {
            number = $filter('number')(param.value, 0);
        }
        eCell.innerHTML = number;
        return eCell;
    }
}
于 2016-06-09T11:24:37.103 回答