Type:Enum은 Enum 속성에 html 태그를 이용하여 다양한 형식으로 표현할 수 있습니다.
셀 또는 드롭다운에 폰트 색상이나 이미지 등을 설정할 수 있습니다.
방법1) Enum에 html태그 넣어서 설정
"Cols": [
{
Header: "html 태그로 설정", //Enum에 html태그 넣어서 설정
Type: "Enum",
Name: "sEnum",
Width: 120,
Enum: "|<image src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ca.jpg'></image><b style='color: red'>red</b>|<image src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/am.jpg'></image><b style='color: yellow'>yellow</b>|<image src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ko.jpg'></image><b style='color: blue'>blue</b>|<image src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ch.jpg'></image><b style='color: green'>green</b>",
EnumKeys: "|A0|B0|C0|D0"
},방법2) onShowEnumMenu 이벤트로 설정이벤트로 설정
onShowEnumMenu(paramObject) {
let col = paramObject.col;
if(col === 'sEnum2') { // 드롭다운 내부에 아이콘 설정
let texts = document.querySelectorAll('.IBEnumMenuItemText');
let menu = {
Items: [
{Name: "red", Value: "A0", LeftHtml: "<div style='width: 18px; height: 12px; background-color: red; border: 1px solid black; display: inline-block; vertical-align: middle; margin-right: 5px;'></div><div style='width: 18px; height: 12px; border: 1px solid black; display: inline-block; vertical-align: middle;'><img src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ca.jpg' style='width: 100%; vertical-align: super'></div>", LeftWidth: 60},
{Name: "yellow", Value: "B0", LeftHtml: "<div style='width: 18px; height: 12px; background-color: yellow; border: 1px solid black; display: inline-block; vertical-align: middle; margin-right: 5px;'></div><div style='width: 18px; height: 12px; border: 1px solid black; display: inline-block; vertical-align: middle;'><img src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/am.jpg' style='width: 100%; vertical-align: super'></div>", LeftWidth: 60},
{Name: "blue", Value: "C0", LeftHtml: "<div style='width: 18px; height: 12px; background-color: blue; border: 1px solid black; display: inline-block; vertical-align: middle; margin-right: 5px;'></div><div style='width: 18px; height: 12px; border: 1px solid black; display: inline-block; vertical-align: middle;'><img src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ko.jpg' style='width: 100%; vertical-align: super'></div>", LeftWidth: 60},
{Name: "green", Value: "D0", LeftHtml: "<div style='width: 18px; height: 12px; background-color: green; border: 1px solid black; display: inline-block; vertical-align: middle; margin-right: 5px;'></div><div style='width: 18px; height: 12px; border: 1px solid black; display: inline-block; vertical-align: middle;'><img src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ch.jpg' style='width: 100%; vertical-align: super'></div>", LeftWidth: 60}
]
};
return menu;
}
},아래 예제를 참고해주세요.