숫자 편집기
숫자 편집기는 숫자를 입력할 수 있는 편집기 입니다.
화면에 표시될때 천 단위, 백만 단위 구분기호를 표시하고 싶은 경우 numberFormat을 "#,##0" 으로만 설정하면 되고, 고정 소수점 사용시에는 필요한 자릿수만큼 소수점 이후에 "0"을 표시, 가변 소수점 사용시에는 "#"을 사용합니다.
예를 들어 천단위 구분기호를 사용하고 고정 소수점 3자리를 사용할 경우 "#,##0.000" 를 고정 소수점 4자리를 사용할 경우 "#,##0.0000" 를 사용하면 됩니다.
numberFormat을 적용한 경우 화면에 표시되는 셀의 값만 변경되는 것이고 dataProvider의 필드에 있는 원본값은 변함이 없습니다.
Number Format 지정
Number Format에서 '0'의 의미는 고정된 자리를 의미 합니다. '#'은 가변 자리를 의미 합니다. 예를 들어 '#,##0.###'의 경우 표시할 숫자가 정수인 경우 정수만 표시 됩니다.
'#,##0.###' 의 경우
100 -> 100
10000 -> 10,000
100.1 -> 100.1
1000.12 -> 1,000.12
1000.1234 -> 1,000.123
1000.1237 -> 1,000.124
'#,##0.000' 의 경우
100 -> 100.000
10000 -> 10,000.000
100.1 -> 100.100
1000.12 -> 1,000.120
1000.1234 -> 1,000.123
1000.1237 -> 1,000.124
'#,##0.0##' 의 경우
100 -> 100.0
10000 -> 10,000.0
100.1 -> 100.1
1000.12 -> 1,000.12
1000.1234 -> 1,000.123
1000.1237 -> 1,000.124
...
//컬럼설정
{
name: "Quantity",
fieldName: "Quantity",
width: 100,
sortable: false,
editor: {
type: "number",
textAlignment: "far",
//입력시 적용되는 포맷(소수점 최대 3자리까지만 입력 가능)
editFormat: "#,##0.###",
multipleChar: "+",
},
//그리드 셀에 표시되는 포맷(소수점 최대 한자리까지만 표시)
numberFormat: "#,##0.#",
header: {
"text": "Number Edit"
}
}
...사용자가 키 입력시에도 포맷을 적용할 수 있습니다.
editor.editFormat을 "#,##0.###"로 지정한 경우 소수점이하 자리는 최대 3자릿수만큼만 입력됩니다. (주: editFormat의 소수점 자리에 0을 쓰는 경우 #과 동일하게 처리됩니다.)
아래 예제는 사용자가 입력할 경우 소수점 3자리까지 입력되고 화면에 표시되는 셀에는 1자리까지만 표현되는 예제입니다.
...
//컬럼설정
{
name: "Quantity",
fieldName: "Quantity",
width: 100,
sortable: false,
editor: {
type: "number",
textAlignment: "far",
//입력시 적용되는 포맷(소수점 최대 3자리까지만 입력 가능)
editFormat: "#,##0.###",
multipleChar: "+",
},
//그리드 셀에 표시되는 포맷(소수점 최대 한자리까지만 표시)
numberFormat: "#,##0.#",
header: {
"text": "Number Edit"
}
}
...천단위 , 와 소수점 . 자리 바꾸기
일부 국가에서는 천단위 구분기호 ','와 소수점 '.'을 반대로 사용하는 경우가 있습니다.(천단위 구분기호 '.', 소수점 ',')
이 경우 format 문자열을 ; 으로 구분하여 첫번째는 숫자를 표현하는 형식을 두번째는 소숫점 기호를 세번째는 천단위 구분기호를 지정합니다.
숫자포맷;소수점기호;천단위구분기호
numberFormat: "#,##0.##;,;." //12345.67 인 경우 12.345,56 으로 표시입력시 에디터에도 같은 포맷을 가지려면 동일하게 지정하면 됩니다.
editFormat: "#,##0.##;,;." //12345.67 인 경우 12.345,56 으로 표시var column = [
...
//컬럼설정
{
name: "Quantity",
fieldName: "Quantity",
width: 100,
sortable: false,
editor: {
type: "number",
textAlignment: "far",
editFormat: "#,##0.##;,;.",
multipleChar: "+",
},
numberFormat: "#,##0.##;,;.",
header: {
"text": "Number Edit"
}
}
...
];절대값, 올림, 버림
표시되는 값을 절대값으로 표시하거나 올림, 내림 처리할 수 있습니다.
화면에 표시되는 값만 변경 되는 것이며 dataProvider에 담긴 값은 변경 되지 않습니다.
(아무것도 지정하지 않으면 반올림 처리 됩니다.)
numberFormat 으로 지정한 포맷 문자열 뒤에 세미콜론(;)으로 구분 지은 뒤 a, c, f 지정하면 됩니다.
numberFormat: "#,##0.###;a" //절대값으로 표시
numberFormat: "#,##0.###;c" //올림하여 표시
numberFormat: "#,##0.###;f" //내림하여 표시
numberFormat: "#,##0.###;,;.;a" //천단위 , 와 소수점 . 의 위치를 변경하고 절대값으로 표시
numberFormat: "#,##0.###;,;.;c" //천단위 , 와 소수점 . 의 위치를 변경하고 올림하여 표시
numberFormat: "#,##0.###;,;.;f" //천단위 , 와 소수점 . 의 위치를 변경하고 내림하여 표시스텝 버튼
셀안에 스텝 버튼을 표시하여 숫자값을 조작할 수 있습니다.
var column = [
...
//컬럼설정
{
name: "Quantity",
fieldName: "Quantity",
width: 100,
sortable: false,
editButtonVisibility: "always",
editor: {
type: "number",
showStepButton: true, //숫자 편집 버튼 표시 여부
direction: "horizontal", //버튼 표시 방향 설정, "vertical" 설정 시 세로방향
step: 1, // 버튼 클릭 시 값 증감 단위
//min: 20, //최소값
//max: 999, //최대값
//delay: 100 //버튼을 누르고 있을 때 값 적용 간격
},
numberFormat: "#,##0",
header: {
"text": "Number Edit"
}
}
...
];스텝 버튼의 표시 여부 조작하기
column.editButtonVisibility에 always, default, hidden, rowfocused, visible를 지정하여 보여지는 방식을 설정한다.
var column = [
...
//컬럼설정
{
name: "Quantity",
fieldName: "Quantity",
width: 100,
sortable: false,
editButtonVisibility: "always", //default, hidden, rowfocused, visible
editor: {
type: "number",
showStepButton: true, //숫자 편집 버튼 표시 여부
direction: "vertical", //버튼 표시 방향 설정, "horizontal" 설정 시 가로방향
step: 1, // 버튼 클릭 시 값 증감 단위
//min: 20, //최소값
//max: 999, //최대값
//delay: 100 //버튼을 누르고 있을 때 값 적용 간격
},
numberFormat: "#,##0",
header: {
"text": "always"
}
}
...
];