AUISoft
AUIGrid 3.0.14 Documentation
MaskEditRenderer

마스크 편집 렌더러(MaskEditRenderer)는 정의된 패턴으로 강제 시켜 입력받도록 하는 편집 렌더러입니다.

마스크 편집 렌더러를 사용하기 위해서는 mask 속성을 반드시 설정해야 합니다.

이 편집 렌더러는 사용자가 수정한 값의 유효성 검사(validator) 을 할 수 있습니다.

클립보드의 값을 마스크 설정된 칼럼에 붙여 넣기 할 때 설정된 mask 규칙에 어긋나면 붙여 넣기 되지 않습니다.

마스크 편집 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRenderer 속성 값인 Object 형태로 선언되어야 합니다.

칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.

아래는 설정 예제 입니다.
var columnLayout = [ {
     dataField : "name",
     headerText : "Name",
     width : 140
}, {
     dataField : "datetime",
     headerText : "DateTime",
     width : 80,
     editRenderer : {
            type : "MaskEditRenderer",
            mask : "9999-99-99 99:99:99",
            placeholder : "yyyy-mm-dd hh:mm:dd",
            applyMaskValue : true
     }
}];
NameDescription
applyMaskValue
Type : Boolean   Version: 3.0.11

수정 적용 시 실제 데이터 모델에 적용 시킬 값이 마스크값 그대로 적용 할지 여부를 지정합니다.

예를 들어 mask를 "9999-99-99" 로 설정한 경우 순수하게 사용자가 입력한 값이 "12345678" 이라 했을 때 다음처럼 데이터 모델에 적용됩니다.

  • applyMaskValue = true : mask 가 설정된 값인 "1234-56-78" 이 데이터 값으로 적용됩니다.
  • applyMaskValue = false : mask 가 아닌 실제 사용자가 입력한 값 "12345678" 이 데이터 값으로 적용됩니다.
기본값(default) : true.
autoEnter
Type : Boolean   Version: 3.0.11

마스크로 설정된 유효한 자릿수만큼 모두 입력하여 끝까지 간 경우 엔터(Enter)로 입력 완료된 것으로 간주 시킬지 여부를 지정합니다.

autoEnter 를 true 로 설정하면 엔터 키와 같은 입력 완료 키를 따로 누르지 않아도 입력이 완료 됩니다.

기본값(default) : false.
inputMode
Type : String   Version: 3.0.11

가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.

가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.

기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.

유효값은 다음과 같습니다.

  • text : 사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.
  • decimal : 사용자의 로케일에 맞는 숫자형 키보드를 제공합니다. 기기에 따라 음의 부호(-)는 제공할 수도, 제공하지 않을 수도 있습니다.
  • numeric : 숫자형 키보드를 제공합니다.
  • tel :전화번호 키보드를 제공합니다.
  • search : 검색 입력 칸에 최적화한 가상 키보드를 제공합니다.
  • email : 이메일 입력에 최적화한 가상 키보드를 제공합니다.
  • url : URL 입력에 최적화한 가상 키보드를 제공합니다.
  • none : 가상 키보드를 출력하지 않습니다.
기본값(default) : "text".
mask
Type : String   Version: 3.0.11

입력을 강제 시킬 마스크(mask)를 설정합니다. 마스크는 미리 정해진 자릿수와 해당 자리에 입력 가능한 패턴을 의미합니다.

마스크 설정의 입력 유효 패턴은 다음과 같습니다.

  • 9 : 숫자만 입력 가능
  • a : 영문자(대소문자)만 입력 가능
  • A : 영문자 대문자만 입력 가능
  • : 숫자, 영문자(대소문자) 입력 가능
  • ~ : 양부호, 음부호(+, -) 둘 중 하나 입력 가능

마스크 편집 렌더러를 사용하기 위해서는 mask 속성을 반드시 설정해야 합니다.

예로 시간과 같이 숫자 6자리만 입력 가능한 마스크 설정은 "99:99:99" 입니다.

기본값(default) : null.
overWrite
Type : Boolean   Version: 3.0.11

마스크 자리 입력 시 덮어쓰기로 값이 치환될지 여부를 지정합니다.

overWrite = false 라면 새로운 값을 입력할 때 현재 값이 뒤로 밀리게 됩니다.

기본값(default) : true.
placeholder
Type : String   Version: 3.0.11

아직 입력되지 않은 마스크 입력 자리에 표시될 placeholder 를 지정합니다.

예로 mask 를 "9999-99-99" 로 설정한 경우 사용자에게 날짜 입력을 표시해 주기 위해 placeholder 를 "yyyy-mm-dd" 로 설정할 수 있습니다.

설정한 mask 와 placeholder 의 자릿수는 같아야 합니다.

placeholder 를 설정하지 않으면 기본값인 "____-__-__" 로 출력됩니다.

기본값(default) : "_".
textAlign
Type : String   Version: 3.0.11

편집 렌더러 즉, 인푸터(inputer)에서 입력 텍스트의 정렬을 지정합니다.

유효값은 "left", "right", "center" 입니다.

기본값(default) : "left".
validator
Type : Function   Version: 3.0.11

사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다.

파라메터 설명

  • oldValue : (String) 수정 전 값
  • newValue : (String) 사용자가 수정 한 값. 즉, 이 값이 유효한지 검사해야 함
  • item : (Object) 해당 행에 출력되고 있는 행 아이템 객체
  • dataField : (String) 해당 칼럼의 데이터필드명
  • fromClipboard : (Boolean) 클립보드(붙여넣기)로 셀 수정한지 여부

함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오.

예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오.

return  { "validate" : false, "message"  : "10,000 보다 큰 수를 입력하세요." }; 

validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다.

함수 전체 작성 예는 다음과 같습니다.

validator : function(oldValue, newValue, item, dataField, fromClipboard) {
       var isValid = false;
       var numVal = Number(newValue);
       if(!isNaN(numVal) && numVal > 10000) {
              isValid = true;
        }
        return { "validate" : isValid, "message"  : "10,000 보다 큰 수를 입력하세요." };
 }

참고 : 클립보드(붙여넣기)인 경우, 유효성 검사 실패 할 때 메세지 출력은 생략됩니다.

기본값(default) : null.