Ag-Grid:数字格式,例如:123456.78到123,457

Question

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

Answer 1

根据单元格渲染流程文档(此处),您可以使用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用于文本格式.cellRenderer用于何时包含HTML标记和可能的单元功能.因此,例如,如果要将标点符号放入值中,请使用valueFormatter,如果要将按钮或HTML链接用于cellRenderer.可以使用两者的组合,在这种情况下,valueFormatter的结果将传递给cellRenderer.

Answer 2

{
         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代码中提及。

Answer 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;
    }
}