상태를 사용하여 레이아웃 설정하기
SpreadJS 디자이너 컴포넌트는 특정 레이아웃을 표시하기 위해 명령 옵션에 정의할 수 있는 다양한 상태를 제공합니다.
inDropdown: 명령이 드롭다운에 있음을 나타냅니다.
isToolbarMode: 툴바 리본 모드를 나타냅니다.
designer.setData 메서드를 사용하여 사용자 지정 상태를 추가할 수 있습니다.
위 상태들은 IF, AND, NOT 같은 수식 표현식을 사용해 명령 옵션에 정의할 수 있습니다. 다음 코드 구문은 "text"와 "bigButton" 명령 옵션에서 다양한 수식 표현식을 사용해 상태를 설정하는 예시입니다:
명령이 드롭다운에 없고 리본이 툴바 모드가 아닐 때 bigButton 옵션을 true로 설정합니다.
text: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")'
툴바 리본 모드일 때는 text를 "Toolbar Ribbon"으로 설정하고, 그렇지 않으면 "Default Ribbon"으로 설정합니다.
bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))'명령이 드롭다운에 없고 리본이 툴바 모드가 아닐 때 bigButton 옵션을 true로 설정합니다.
참고: commandName 옵션은 수식 표현식을 지원하지 않습니다.
예시
아래 이미지는 기본 리본 모드와 툴바 리본 모드 각각에서 명령어 텍스트와 아이콘이 어떻게 다른지 보여줍니다.
다음 코드 샘플은 위 이미지에 표시된 명령 옵션에서 config 상태를 설정하는 방법을 보여줍니다.
<style>
.ribbon-button-sjs {
background-color: #0078d4;
}
.ribbon-button-hi {
background-color: #f25022;
}
</style>
<script>
window.onload = function () {
// "Welcome" 명령어 정의
var command = {
title: "Welcome",
text: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")',
iconClass: '=IF(isToolbarMode, "ribbon-button-sjs","ribbon-button-hi")',
bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))',
direction: '=IF(isToolbarMode, "horizontal","vertical")',
visiblePriority: 1000,
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
alert('Welcome to new designer.');
}
};
// 기본 구성 명령 맵에 명령 추가
customRibbonConfig = GC.Spread.Sheets.Designer.DefaultConfig;
customRibbonConfig.commandMap = {
Welcome: command
}
// 기본 리본에 버튼 추가
customRibbonConfig.ribbon[0].buttonGroups.unshift({
"label": "New Button",
"thumbnailClass": "welcome",
"commandGroup": {
"children": [
{
"direction": "vertical",
"commands": [
"Welcome"
]
}
]
}
});
customRibbonConfig.ribbon[0].buttonGroups[2].commandGroup.children[0].children.push('Welcome');
// 툴바 구성의 명령 맵에 명령 추가
customToolbarConfig = GC.Spread.Sheets.Designer.ToolBarModeConfig;
customToolbarConfig.commandMap = {
Welcome: command
}
// 툴바 리본에 버튼 추가
customToolbarConfig.ribbon.panels[0].buttonGroups.unshift({
"buttonGroupName": "Welcome",
"commandGroup": {
"children": [
"Welcome"
]
}
});
// 기본 리본 모드로 디자이너 컴포넌트 초기화
var designer = new GC.Spread.Sheets.Designer.Designer('designerHost');
designer.setConfig(customRibbonConfig);
// 기본 리본 모드와 툴바 리본 모드 간 전환 버튼 설정
document.getElementById('switch').addEventListener('click', function () {
designer.setConfig(designer.getData('isToolbarMode') ? customRibbonConfig : customToolbarConfig)
});
}
</script>