AUISoft
AUIGrid 3.0.13 Documentation
InputEditRenderer

입력창(input[type="text"])이 나타나는 기본 편집 렌더러입니다.

이 렌더러는 사용자가 수정한 값의 유효성 검사(validating) 을 할 수 있으며, 숫자만 입력 가능토록 설정이 가능합니다.

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

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

아래는 설정 예제 입니다.
var columnLayout = [ {
     dataField : "name",
     headerText : "Name",
     width : 140
}, {
     dataField : "price",
     headerText : "Price",
     width : 80,
     dataType : "numeric"
     editRenderer : {
            type : "InputEditRenderer",
            onlyNumeric : true, // 0~9 까지만 허용
            allowPoint : true // onlyNumeric 인 경우 소수점(.) 도 허용
      }
}];
NameDescription
allowNegative
Type : Boolean   Version: 2.8.2

숫자만 입력 설정(onlyNumeric=true) 인 경우, 음수 부호 입력(-) 도 허용할지 여부를 지정합니다.

기본값(default) : false.
allowPoint
Type : Boolean

숫자만 입력 설정(onlyNumeric=true) 인 경우, 소수점 입력(.) 도 허용할지 여부를 지정합니다.

기본값(default) : false.
autoLowerCase
Type : Boolean   Version: 3.0.12.0

사용자가 입력한 문자를 소문자화 시킬지 여부를 지정합니다.

예로 영문자 A 를 입력하면 자동으로 소문자 a 로 변환시킵니다.

기본값(default) : false.
autoThousandSeparator
Type : Boolean   Version: 2.12

숫자만 입력 설정(onlyNumeric=true) 인 경우, 인푸터에 자동 컴마를 천단위 출력할지 여부를 지정합니다.

정규식(regExp)를 설정하는 경우 해당 속성은 무시됩니다.

기본값(default) : false.
autoUpperCase
Type : Boolean   Version: 3.0.12.0

사용자가 입력한 문자를 대문자화 시킬지 여부를 지정합니다.

예로 영문자 a 를 입력하면 자동으로 대문자 A 로 변환시킵니다.

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

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

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

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

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

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

사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다.

기본값(default) : 10000.
notCheckByClipboard
Type : Boolean   Version: 3.0.12.1

붙여넣기한 경우 정규식이나 숫자만 허용에 대한 규칙, validator 통과를 체크하여 해당 값이 적용될지 여부를 지정합니다.

예로 onlyNumeric = true 가 설정된 경우 클립보드 값이 숫자가 아닌 경우 붙여넣기를 허용하지 않습니다.

마찬가지로 정규식(regExp)가 설정된 경우 클립보드 값이 정규식에 맞지 않다면 붙여넣기를 허용하지 않습니다.

이 속성을 true 설정하면 붙여넣기 할 때 이 규칙 및 validator 검사를 무시하고 클립보드의 값을 항상 붙여넣기 허용합니다.

이 허용된 값은 개발자가 cellEditEndBefore 이벤트에서 값을 원하는 형태로 변경 시켜 적용을 결정할 수 있습니다.

기본값(default) : false.
onlyNumeric
Type : Boolean

입력 시 사용자가 숫자 0~9 만 반응하도록 지정합니다.

onlyNumeric 을 true 설정하면 사용자는 숫자 외에 다른 문자는 입력할 수 없습니다.

기본값(default) : false.
passwordMode
Type : Boolean   Version: 3.0.13

입력 값이 보이지 않는 패스워드 유형으로 편집 렌더러를 표시할지를 여부를 지정합니다.

기본값(default) : false.
regExp
Type : String   Version: 3.0.12.0

사용자가 입력 할 수 있는 값의 패턴을 정규식으로 제한시킵니다.

정규식 작성의 규칙은 일반적인 자바스크립트 정규식과 동일합니다.

사용자의 매 입력 시 마다 정규식 테스트를 진행하여 참(true)인 경우만 입력 허용 시킵니다.

예로 다음과 같이 정의할 수 있습니다.

  • 영어 대소문자만 입력 : "^[a-zA-Z]+$"
  • 숫자만 입력 : "^[0-9]+$"
  • 한글만 입력 : "[ㄱ-힣]+$"
  • 숫자, 영어대소문자만 입력 : "^[0-9a-zA-Z]+$"

이 속성은 onlyNumeric 속성과 함께 사용할 수 없습니다. onlyNumeric 을 true 로 설정한다면 정규식 패턴은 무시됩니다.

기본값(default) : null.
showEditorBtnOver
Type : Boolean

셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.

에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.

기본값(default) : false.
textAlign
Type : String   Version: 2.12

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

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

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

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

파라메터 설명

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

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

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

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

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

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

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

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

기본값(default) : null.