백분율 숫자를 입력하여 원본 비율을 수정하는 편집 렌더러입니다. 데이터가 0.1이면 입력창에 10을 표시하고, 20을 입력하면 0.2를 저장합니다. 입력창은 기본 오른쪽 정렬입니다.
칼럼의 editRenderer 속성에 type: "PercentageEditRenderer"로 지정합니다. 화면 표시는 PercentageRenderer를 함께 사용합니다.
숫자만 입력하며 % 기호는 입력하지 않습니다. allowPoint로 소수점 입력을, min과 max로 백분율 숫자 단위의 입력 범위를 지정합니다. 12.5는 0.125, 125는 1.25로 저장하며 PercentageRenderer의 precision과 관계없이 원본 비율을 편집합니다.
max는 입력 및 붙여넣기 시 즉시 제한하고 min은 편집 완료 시 보정합니다. 값을 지우거나 소수점만 입력한 중간 상태는 유지합니다. 데이터는 편집 완료 시 저장하며 빈 값은 blankNumericToNullOnEditing 및 blankToNullOnEditing 설정을 따릅니다.
validator, cellEditEndBefore 및 cellEditEnd에는 범위를 보정한 원본 비율을 전달합니다. 20을 입력하면 0.2가 전달되므로 콜백에서 다시 100으로 나누지 않습니다.
백분율 변환은 입력창 편집에 적용합니다. setCellValue 등의 API와 입력창 밖에서 셀에 직접 붙여넣는 값은 원본 비율 단위를 사용합니다. 셀 붙여넣기에도 숫자와 범위를 검사하며 max: 100일 때 1.5를 붙여넣으면 1로 보정합니다.
아래는 설정 예제 입니다.var columnLayout = [{
dataField: "progress",
headerText: "진행률",
dataType: "numeric",
renderer: { type: "PercentageRenderer", precision: 1 },
editRenderer: {
type: "PercentageEditRenderer",
allowPoint: true, // 소수점 입력 허용
min: 0, // 입력창 기준 0%
max: 100 // 입력창 기준 100%, 실제 데이터 상한은 1
}
}];
// 데이터 0.1: 화면은 10.0%, 더블클릭/F2 입력창은 10입니다.
// 입력창에서 20으로 수정하면 데이터 모델에는 0.2를 저장합니다.| Name | Description |
|---|---|
|
allowPoint
| Type : Boolean Version: 3.0.19 소수점 입력을 허용할지 지정합니다. InputEditRenderer의 allowPoint와 같은 역할이며 백분율 편집기의 기본값은 true입니다. false이면 입력창에서 소수점 입력을 막습니다. 기존 소수 값이나 셀 붙여넣기를 확정할 때는 백분율 숫자의 소수 부분을 버립니다. min은 올림, max는 버림하여 허용 구간 안의 정수 경계를 사용합니다. 기본값(default) :true |
|
inputMode
| Type : String Version: 3.0.19 모바일 가상 키보드의 형식을 지정합니다. 생략하면 allowPoint가 true일 때 decimal, false일 때 numeric 키보드를 요청하며 실제 배치는 기기에 따라 달라집니다. text, decimal, numeric, tel, search, email, url, none을 지정할 수 있습니다. 기본값(default) :"decimal" |
|
max
| Type : Number Version: 3.0.19 입력할 백분율 숫자의 최댓값을 지정합니다. max: 100이면 입력창의 상한은 100이며 실제 데이터 상한은 1입니다. 입력하거나 붙여넣은 숫자가 상한을 초과하면 입력창 값을 즉시 max로 바꿉니다. 생략, null, NaN, 무한대, 음수 또는 숫자가 아닌 설정은 상한을 제한하지 않습니다. 유효한 min보다 작은 max도 무시합니다. 기본값(default) :null |
|
maxlength
| Type : Number Version: 3.0.19 입력창의 최대 글자 수를 지정합니다. 소수점도 글자 수에 포함됩니다. 숫자의 최댓값은 max로 지정합니다. 기본값(default) :10000 |
|
min
| Type : Number Version: 3.0.19 입력할 백분율 숫자의 최솟값을 지정합니다. min: 20이면 입력창의 하한은 20이며 실제 데이터 하한은 0.2입니다. 입력 중에는 min 미만의 숫자를 허용하며, 편집 완료 시 min보다 작으면 min으로 보정하여 저장합니다. 예를 들어 min: 20일 때 5 다음에 0을 입력하면 50으로 수정할 수 있고, 5에서 편집을 완료하면 20으로 보정합니다. 빈 값은 blankNumericToNullOnEditing 및 blankToNullOnEditing 설정을 따릅니다. 0 이상의 유한한 숫자를 사용합니다. 생략, null, NaN, 무한대, 음수 또는 숫자가 아닌 설정은 0을 사용합니다. 음수 입력은 허용하지 않습니다. 기본값(default) :0 |
|
notCheckByClipboard
| Type : Boolean Version: 3.0.19 입력창 밖에서 셀에 직접 붙여넣을 때 숫자, allowPoint, min, max 및 validator 검사를 생략할지 지정합니다. true이면 붙여넣은 모델 값을 그대로 사용합니다. 기본값(default) :false |
|
textAlign
| Type : String Version: 3.0.19 입력창의 텍스트 정렬을 지정합니다. right, left, center를 사용할 수 있습니다. 기본값(default) :"right" |
|
validator
| Type : Function Version: 3.0.19 입력 범위 보정 후 값을 확정하기 전에 유효성을 검사합니다. oldValue와 newValue는 백분율 숫자가 아닌 데이터 비율입니다. 20을 입력하면 newValue는 0.2입니다. 파라미터는 oldValue, newValue, item, dataField, fromClipboard, which 순서입니다. fromClipboard는 셀 붙여넣기일 때 true이며, which는 편집 완료 키 또는 경로입니다. { validate: true }로 허용하고 { validate: false, message: "안내" }로 거부합니다. 거부 시 원본으로 되돌리거나 initValue에 지정한 비율을 입력창에 백분율로 표시합니다.
기본값(default) : null |