아이콘 렌더러는 특정 칼럼의 셀에 아이콘이 포함되도록 출력하는 칼럼 렌더러입니다.
아이콘 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 renderer 속성 값인 Object 형태로 선언되어야 합니다.
칼럼의 renderer 속성의 type 으로만 설정 가능합니다.
아래는 설정 예제 입니다.
myColumnLayout.push({
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"
}
}
});
| Name | Description |
|---|---|
|
iconFunction
| Type : Function icon 파일의 경로를 반환하는 아이콘 함수를 선언합니다. 데이터의 value 를 비교 또는 처리하여 원하는 아이콘의 파일의 경로를 반환해 주십시오. 해당 반환 파일이 곧 아이콘으로 출력됩니다. iconFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
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 : Function 아이콘을 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다. onclick 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
onclick : function(rowIndex, columnIndex, value, item) {
alert("( " + rowIndex + ", " + columnIndex + " ) " + item.name + " 상세보기 클릭");
}
|