web-dev-qa-db-ja.com

Ag-Grid：数値のフォーマット（例：123456.78から123,457）

数値データの巨大なセットがあります。これは、コンマ区切り値としてレンダリングする必要があります。例： 123456.78としてレンダリングされる123,457 Ag-Gridを使用します。これを達成するために親切に私を助けてください。

ag-grid
13
user1638445

セルレンダリングフローのドキュメント（ ここ ）に従って、次のように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に渡されます。

13
Andrew
{
         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コードで言及できます。

8
NunnaS

これを行うには、「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;
    }
}
3
Sharpie