숫자 편집기

숫자 편집기는 숫자를 입력할 수 있는 편집기 입니다.

화면에 표시될때 천 단위, 백만 단위 구분기호를 표시하고 싶은 경우 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"
  }
}
...
];