아이콘 렌더러
ICON 셀 렌더러는 텍스트와 함께 iconLocation 위치에 이미지를 표시합니다.
아이콘 렌더러의 표시 방법
- callback을 사용하여 아이콘 주소를 리턴하여 표시할 수 있습니다.
- iconMap기능을 이용하여 아이콘을 표시할 수 있습니다. (아이콘맵에서 'EUR', 'USD'만 지정하여 2개의 이미지만 표시됨).
var columns = [
... 생략 ...
{
name: "icon1",
fieldName: "Gender",
width: "100",
renderer: {
type: "icon",
iconCallback: function (grid, cell) {
var sex = cell.value == '남' ? 'man' : 'woman';
return "/images/common/" + sex + ".png";
},
iconHeight: 15,
iconWidth: 15
},
header: {
text: "Icon Callback"
}
},
{
name: "icon2",
fieldName: "Gender",
width: "100",
renderer: {
type: "icon",
iconMap: {
"남": "/images/common/man.png",
"여": "/images/common/woman.png"
},
iconHeight: 15,
iconWidth: 10
},
header: {
text: "Icon Map"
}
},
... 생략 ...
];
gridView.setColumns(columns);아이콘의 위치 지정
iconLocation을 지정해서 아이콘이 표시될 위치를 지정할 수 있습니다. 지정할 수 있는 iconLocation은 "left", "right", "top", "bottom", "leftedge", "rightedge", "topedge","bottomedge", "center" 입니다.
var columns = [
... 생략 ...
{
name: "icon1",
fieldName: "Gender",
width: "100",
renderer: {
type: "icon",
iconCallback: function (grid, cell) {
var sex = cell.value == '남' ? 'man' : 'woman';
return "/images/common/" + sex + ".png";
},
iconLocation: "left", //<----
iconHeight: 15,
iconWidth: 10
},
header: {
text: "LEFT"
}
},
... 생략 ...
];
gridView.setColumns(columns);조건에 따라 아이콘 표시
styleCallback을 사용해서 조건에 따라 셀에 아이콘을 표시할 수 있습니다.
아래는 나이가 60세 이상 일 경우, 아이콘을 표시하는 예제입니다.
var columns = [
... 생략 ...
{
name: "icon1",
fieldName: "Gender",
width: "100",
styleCallback: function(grid, dataCell){
let ret = {};
var age = grid.getValue(dataCell.index.itemIndex, 'Age')
if(age > 60){
ret.renderer ={
type: "icon",
iconCallback: function (grid, cell) {
var sex = cell.value == '남' ? 'man' : 'woman';
return "/images/common/" + sex + ".png"
},
iconHeight: 15,
iconWidth: 15
}
}
return ret;
},
header: {
text: "Icon Callback",
styleName: "orange-column"
}
},
... 생략 ...
];
gridView.setColumns(columns);