数値データの巨大なセットがあります。これは、コンマ区切り値としてレンダリングする必要があります。例: 123456.78
としてレンダリングされる123,457
Ag-Gridを使用します。これを達成するために親切に私を助けてください。
セルレンダリングフローのドキュメント( ここ )に従って、次のように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に渡されます。
{
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コードで言及できます。
これを行うには、「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;
}
}