이미지 렌더러

Image 셀 렌더러는 데이터 셀의 값을 이미지 url로 해석해 그 이미지를 내려받고 표시합니다.

이미지 렌더러의 표시 방법

1. 셀 데이터의 값이 이미지의 주소인 경우 이 주소의 이미지를 표시합니다.
2. callback을 사용해 이미지의 주소를 리턴 값으로 사용합니다.
3. imageMap기능을 이용해 이미지를 표시합니다. (아래 예제에서 "image Map" 컬럼은 'EUR'와 'USD'만 지정해 2개의 이미지만 표시합니다.)

var columns = [
  ... 생략 ...
    {
        name: "imageUrl",
        fieldName: "imageUrl",
        type: "data",
        width: "150",
        renderer: {
            type: "image",
            imageField: "imageUrl",
            imageHeight: 80,
        },
        header: {
          text: "Image URL"
        }
    },
    {
        name: "imageUrl1",
        fieldName: "Monetary",
        type: "data",
        width: "150",
        renderer: {
            type: "image",
            imageCallback: function (grid, cell) {
                var monetary = grid.getValue(cell.item.index, "Monetary");
                return "../../../../../public/images/monetaryFlag/" + monetary + ".png";
            },
            imageHeight: 80
        },
        header: {
          text: "Image Callback"
        }
    },
    {
        name: "imageUrl2",
        fieldName: "Monetary",
        type: "data",
        width: "150",
        renderer: {
            type: "image",
            imageMap: {
                "EUR": "../../../../../public/images/monetaryFlag/EUR.png",
                "USD": "../../../../../public/images/monetaryFlag/USD.png"
            },
            imageHeight: 80,
            
        },
        header: {
          text: "Image Map"
        }
    },
  ... 생략 ...
];

gridView.setColumns(columns);