AUISoft
AUIGrid 3.0.14 Documentation
IconRenderer

아이콘 렌더러는 특정 칼럼의 셀에 아이콘이 포함되도록 출력하는 칼럼 렌더러입니다.

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

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

아래는 설정 예제 입니다.
var columnLayout = [ {
     dataField : "name",
     headerText : "Name",
     width : 140
}, {
     dataField : "country",
     headerText : "Country",
     width : 120,
     renderer : {
            type : "IconRenderer",
            iconWidth : 24,
            iconHeight : 20,
            iconTableRef : {
               "Korea" : "./assets/korea.png",
               "USA" : "./assets/usa.png",
               "UK" : "./assets/uk.png",
               "default" : "./assets/default.png"
            },
            onClick : function(event) {
                 alert(event.text);
            }
      }
}];
NameDescription
altField
Type : String   Version: 3.0.15

아이콘 이미지에 마우스 오버 시 나타나는 설명 필드명를 지정합니다. 이 필드명은 데이터에 존재하는 필드명이여야 합니다.

altField 는 이미지 태그의 alt 속성(title 속성)에 삽입됩니다.

기본값(default) : "".
altText
Type : String   Version: 3.0.15

아이콘 이미지에 마우스 오버 시 나타나는 설명 텍스트를 지정합니다.

altText 는 아이콘 이미지 태그의 alt 속성(title 속성)에 삽입됩니다.

altText 는 해당 칼럼의 모든 이미지에 동일한 텍스트가 설명 텍스트로 출력됩니다.

마우스 오버 시 개별 셀에 대한 설명 텍스트를 원한다면 altField 를 지정하십시오.

기본값(default) : "".
iconFunction
Type : Function

icon 파일의 경로를 반환하는 아이콘 함수를 선언합니다.

데이터의 value 를 비교 또는 처리하여 원하는 아이콘의 파일의 경로를 반환해 주십시오.

해당 반환 파일이 곧 아이콘으로 출력됩니다.

만약 null 반환하면 아이콘 표시 자체를 하지 않습니다.

iconFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • value : 원래 데이터의 해당 셀 값(value)
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
iconFunction : function(rowIndex, columnIndex, value, item) {
   var icon = "./assets/myIcon.png";
   // 로직 처리
   return icon;
}
iconHeight
Type : Number

아이콘의 세로 사이즈를 지정합니다.

보다 정확한 렌더링을 위해 사이즈를 지정하시길 바랍니다.

기본값(default) : null.
iconPosition
Type : String

아이콘이 위치할 곳을 지정합니다.

유효값은 "left", "right", "aisle", "aisleRight" 입니다. "aisle" 로 설정한 경우 text-align 스타일과 독립적으로 항상 왼쪽에 표시됩니다.

마찬가지로 "aisleRight" 는 칼럼 기준 항상 오른쪽 사이드에 표시됩니다.

기본값(default) : "left".
iconTableRef
Type : Object

icon 값 참조할 테이블 레퍼런스를 선언합니다

예를 들어 해당 칼럼의 데이터 값이 일반 스트링 또는 숫자입니다. 이 때 해당 value 를 통해 얻을 수 있는 아이콘 파일 경로를 참조할 수 있는 해쉬테이블을 만듭니다.

아이콘렌더러를 사용하기 위해서는 iconTableRef 또는 iconFunction 중 하나는 선언되어야 합니다.

iconWidth
Type : Number

아이콘의 가로 사이즈를 지정합니다.

아이콘의 가로 사이즈를 지정하지 않은 경우 기본값으로 24가 적용됩니다.

보다 정확한 렌더링을 위해 사이즈를 지정하시길 바랍니다.

기본값(default) : 24.
onclick
Type : Event   Version: 2.7

[deprecated Ver 3.0.4]

Also See : onClick

onClick
Type : Event   Version: 3.0.4

아이콘을 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형으로 "iconClick" 임
  • pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • text : 아이콘 옆의 텍스트
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
  • dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField

onClick 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

onClick : function(event) {
  alert("( " + event.rowIndex + ", " + event.columnIndex + " ) " + event.text + " 클릭");
}