이미지 렌더러는 특정 칼럼의 셀에 이미지가 출력되는 칼럼 렌더러입니다.
이미지 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 renderer 속성 값인 Object 형태로 선언되어야 합니다.
칼럼의 renderer 속성의 type 으로만 설정 가능합니다.
아래는 설정 예제 입니다.var columnLayout = [ { dataField : "name", headerText : "Name", width : 140 }, { dataField : "country", headerText : "Country", width : 120, renderer : { type : "ImageRenderer" } }];
Name | Description |
---|---|
aliasFunction
| Type : Function Version: 3.0.14.5 ImageRenderer 로 정의된 칼럼에서 엑셀, PDF 내보내기 할 때 재가공하여 값을 출력하고자 하는 경우 이 속성을 설정하십시오. aliasFunction 을 정의 하지 않은 경우, 기본값은 dataField 값 기준입니다.(altField 를 설정한 경우 altField 기준) aliasFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
aliasFunction : function(rowIndex, columnIndex, value, headerText, item, dataField) { var myString = ""; // 로직 처리 // 여기서 value 를 원하는 형태로 재가공 또는 포매팅하여 반환하십시오. return myString; } 함수의 반환값이 곧 엑셀, PDF 등 내보내기 값입니다. 기본값(default) :null; . |
altField
| Type : String Version: 3.0.7 이미지에 마우스 오버 시 나타나는 설명 필드명를 지정합니다. 이 필드명은 데이터에 존재하는 필드명이여야 합니다. altField 는 이미지 태그의 alt 속성(title 속성)에 삽입됩니다. 만약 altField 를 null 로 설정하면 마우스 오버 시 툴팁이 표시 되지 않습니다. 기본값(default) :"" . |
altText
| Type : String Version: 3.0.7 이미지에 마우스 오버 시 나타나는 설명 텍스트를 지정합니다. altText 는 이미지 태그의 alt 속성(title 속성)에 삽입됩니다. altText 는 해당 칼럼의 모든 이미지에 동일한 텍스트가 설명 텍스트로 출력됩니다. 마우스 오버 시 개별 셀에 대한 설명 텍스트를 원한다면 altField 를 지정하십시오. 기본값(default) :"" . |
ignoreRowHeight
| Type : Boolean Version: 3.0.4 이미지의 세로 사이즈(imgHeight)을 그리드의 행 높이보다 크게 설정한 경우, 무시하고 이미지를 크게 출력할지 여부를 지정합니다. 기본값(default) :false . |
imgHeight
| Type : Number 이미지의 세로 사이즈를 지정합니다. imgHeight 을 지정하지 않으면 자동적으로 rowHeight 에 맞게 최적화 됩니다. 보다 빠른 렌더링을 위해 사이즈를 지정을 권장합니다. 기본값(default) :NaN . |
imgTableRef
| Type : Object 이미지의 소스(src) 값 참조할 테이블 레퍼런스를 선언합니다 예를 들어 해당 칼럼의 데이터 값이 일반 스트링 또는 숫자입니다. 이 때 해당 value 를 통해 얻을 수 있는 이미지 파일 경로를 참조할 수 있는 해쉬테이블을 만듭니다. 기본값(default) :null . |
srcFunction
| Type : Function Version: 3.0.7 이미지 파일의 경로를 반환하는 이미지 소스 함수를 선언합니다. 데이터의 value 를 비교 또는 처리하여 원하는 이미지의 파일 경로를 반환해 주십시오. 해당 반환 파일이 곧 이미지로 출력됩니다. 만약 null 반환하면 이미지 표시 자체를 하지 않습니다. srcFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
srcFunction : function(rowIndex, columnIndex, value, item) { var src = "./assets/myIcon.png"; // 로직 처리 return src; } |