web-dev-qa-db-fra.com

Ag-Grid: Formatage des nombres, par exemple: 123456,78 à 123 457

J'ai d'énormes ensembles de données numériques. cela doit être rendu sous forme de valeur séparée par des virgules. Pour Ex. 123456.78 à rendre comme 123,457 en utilisant Ag-Grid. Veuillez m'aider à y parvenir.

ag-grid
13
user1638445

Selon la documentation du flux de rendu des cellules ( ici ), vous pouvez utiliser colDef.valueFormatter, comme ceci:

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,");
}

Vous pouvez également utiliser un cellRenderer comme d'autres articles le décrivent, mais c'est généralement pour un rendu plus complexe, tandis que le valueFormatter est spécifiquement pour ce cas. Depuis l'ag-grid documentation :

valueFormatter est pour la mise en forme du texte. cellRenderer sont pour quand vous voulez inclure le balisage HTML et potentiellement la fonctionnalité à la cellule. Ainsi, par exemple, si vous souhaitez mettre de la ponctuation dans une valeur, utilisez un valueFormatter, si vous voulez placer des boutons ou des liens HTML, utilisez un cellRenderer. Il est possible d'utiliser une combinaison des deux, auquel cas le résultat de valueFormatter sera transmis au 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);
}

Comme ceux-ci, nous pouvons mentionner dans le code Angular2 TypeScript.

8
NunnaS

Vous pouvez le faire en écrivant un "customcellRenderer", lorsque vous créez une définition de colonne, fournissez une fonction à l'attribut "cellRenderer" et dans le rendu, utilisez un filtre numérique, quelque chose comme ceci

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