Alopex Grid - 소숫점 두자리 표현 렌더함수

Alopex Grid를 사용하다보면 숫자값에 , 를 3자리마다 찍어줘야 하는데, Javascript의 toLocaleString을 통해서 구현

 

기본적인 방식은 아래와 같다

function renderDecimal2(value, data, render, mapping, grid){
	var fraction = 2;	
	value = parseFloat(value);
    
	if(isNaN(value)){
		value = 0;
	}
	
	return (value).toLocaleString("en-US", {style: "decimal",minimumFractionDigits :fraction, maximumFractionDigits: fraction});
}

 

 

 

조금 응용해보자

function renderDecimalByDataCurrency(value, data, render, mapping, grid){
	
    // dataSet의 Row에 컬럼 'currencty'이란 컬럼이 있었고 거기에 각각의 값들이 존재한다면..
    // row 1에서는 currencty USD 과 14324.4423 => USD 14,324.44
    // row 2에서는 currencty KRW 과 213524.4423 => KRW 213,524.40  표현되길 원한다
    
    
    var fraction = 2;	
    var currency = data.currency
	    
	value = parseFloat(value);
	if(isNaN(value)){
		value = 0;
	}
	value = (value).toLocaleString("en-US", {style: "decimal",minimumFractionDigits :fraction, maximumFractionDigits: fraction});
    
	return currency + ' ' +  value
}

 

 

최종 코드

var data = [
	{
		"item": "탁자",
		"currency": "KRW",
		"price": "223500",				
	},
	{
		"item": "선반A",
		"currency": "USD",
		"price": "3990.50",				
	}
];
function renderDecimalByDataCurrency(value, data, render, mapping, grid){
	
    // dataSet의 Row에 컬럼 'currencty'이란 컬럼이 있었고 거기에 각각의 값들이 존재한다면..
    // row 1에서는 currencty USD 과 14324.4423 => USD 14,324.44
    // row 2에서는 currencty KRW 과 213524.4423 => KRW 213,524.40  표현되길 원한다
    
    
    var fraction = 2;	
    var currency = data.currency
	    
	value = parseFloat(value);
	if(isNaN(value)){
		value = 0;
	}
	value = (value).toLocaleString("en-US", {style: "decimal",minimumFractionDigits :fraction, maximumFractionDigits: fraction});
    
	return currency + ' ' +  value
}


$('#gr').alopexGrid({	
	height: 200,
	autoColumnIndex: true,
	columnMapping : [
		{
			align : 'center',
			key : 'check',
			width : '30px',
			selectorColumn : true
		}, {
			key : 'item',
			title : '아이템',			
			width : '100px'
		}, {
			key : 'price',
			title : '금액',			
			width : '100px',
			align : 'right',
			render: renderDecimalByDataCurrency
		},
	],
	data : data
});

https://codepen.io/Hatcha/pen/LYVvxVM