이미지 렌더러
Image 셀 렌더러는 데이터 셀의 값을 이미지 url로 해석해 그 이미지를 내려받고 표시합니다.
이미지 렌더러의 표시 방법
- 셀 데이터의 값이 이미지의 주소인 경우 이 주소의 이미지를 표시합니다.
- callback을 사용해 이미지의 주소를 리턴 값으로 사용합니다.
- imageMap기능을 이용해 이미지를 표시합니다. (아래 예제에서 "image Map" 컬럼은 'EUR'와 'USD'만 지정해 2개의 이미지만 표시합니다.)
var columns = [
... 생략 ...
{
name: "imageUrl",
fieldName: "imageUrl",
width: "150",
renderer: {
type: "image",
imageField: "imageUrl",
imageHeight: 80,
},
header: {
text: "Image URL"
}
},
{
name: "imageUrl1",
fieldName: "Monetary",
width: "150",
renderer: {
type: "image",
imageCallback: function (grid, cell) {
var monetary = grid.getValue(cell.item.index, "Monetary");
return "/images/monetaryFlag/" + monetary + ".png";
},
imageHeight: 80
},
header: {
text: "Image Callback"
}
},
{
name: "imageUrl2",
fieldName: "Monetary",
width: "150",
renderer: {
type: "image",
imageMap: {
"EUR": "/images/monetaryFlag/EUR.png",
"USD": "/images/monetaryFlag/USD.png"
},
imageHeight: 80,
},
header: {
text: "Image Map"
}
},
... 생략 ...
];
gridView.setColumns(columns);