셀에 이미지를 출력한 예제입니다.(칼럼에 ImageRenderer 사용)
ImageRenderer 에 삽입되는 데이터는 이미지 소스(src) 입니다.
데모의 Country, Flag, Color 는 모두 이미지렌더러이지만 이미지 소스를 삽입하는 형태를 다양하게 작성한 모습입니다.
엑셀 내보내기// AUIGrid 칼럼 레이아웃 설정 var columnLayout = [{ ... }, { dataField: "country", headerText: "Country", width: 120, renderer: { type: "ImageRenderer", imgHeight: 24, // 이미지 높이, 지정하지 않으면 rowHeight에 맞게 자동 조절되지만 빠른 렌더링을 위해 설정을 추천합니다. altField: null, // alt(title) 속성에 삽입될 필드명, 툴팁으로 출력됨. 만약 null 을 설정하면 툴팁 표시 안함. imgTableRef: { // 이미지 소스참조할 테이블 레퍼런스 "Korea": "./assets/korea.png", "USA": "./assets/usa.png", "UK": "./assets/uk.png", "Japan": "./assets/japan.png", "China": "./assets/china.png", "France": "./assets/france.png", "Italy": "./assets/italy.png", "Singapore": "./assets/singapore.png", "Taiwan": "./assets/taiwan.png", "Ireland": "./assets/ireland.png", "default": "./assets/korea.png" // default } } }, { dataField: "flag", headerText: "Flag", prefix: "./assets/", width: 120, renderer: { type: "ImageRenderer", imgHeight: 24, // 이미지 높이, 지정하지 않으면 rowHeight에 맞게 자동 조절되지만 빠른 렌더링을 위해 설정을 추천합니다. altField: "country" // alt(title) 속성에 삽입될 필드명, 툴팁으로 출력됨 } }, { dataField: "color", headerText: "Color", width: 120, renderer: { type: "ImageRenderer", imgHeight: 24, // 이미지 높이, 지정하지 않으면 rowHeight에 맞게 자동 조절되지만 빠른 렌더링을 위해 설정을 추천합니다. altField: "color", // alt(title) 속성에 삽입될 필드명, 툴팁으로 출력됨 srcFunction: function (rowIndex, columnIndex, value, item) { switch (value) { case "Blue": return "./assets/blue_circle.png"; case "Gray": return "./assets/gray_circle.png"; case "Green": return "./assets/green_circle.png"; case "Orange": return "./assets/orange2_circle.png"; case "Pink": return "./assets/pink_circle.png"; case "Violet": return "./assets/violet_circle.png"; default: return null; // null 반환하면 이미지 표시 안함. } } // end of srcFunction } }