사용자 정의
SpreadJS 디자이너 컴포넌트에서는 다음과 같은 다양한 사용자 지정을 수행할 수 있습니다.
자주 사용하는 명령을 위한 새 리본 탭 추가
데이터를 저장하기 위한 새 버튼을 탭에 추가
셀을 잠그기 위한 새 컨텍스트 메뉴 항목 추가
사용자 지정 작업을 위한 새 대화 상자 추가
디자이너 컴포넌트 용어
디자이너 컴포넌트를 사용자 지정하려면 해당 레이아웃과 용어를 이해하는 것이 중요합니다. 아래 이미지는 각 디자이너 컴포넌트에 지정된 용어를 보여줍니다.
아래 이미지는 리본 컴포넌트에 지정된 용어를 보여줍니다.
디자이너 컴포넌트 사용자 지정을 위한 기본 구성에 액세스
SpreadJS 디자이너 컴포넌트는 명령 트리 구조로 디자이너 컴포넌트의 기본 구성을 포함하는 DefaultConfig 필드를 제공합니다. 이를 사용하여 디자이너 컴포넌트 구성에 액세스하고 사용자 지정할 수 있습니다.
var config = GC.Spread.Sheets.Designer.DefaultConfig;config 구조에서 원하는 사용자 지정을 수행하고 웹 애플리케이션에서 이를 참조할 수 있습니다. 그런 다음 디자이너 컴포넌트를 초기화할 때 이 사용자 지정 구성을 매개 변수로 전달합니다. 이에 대해서는 아래 섹션에서 설명합니다.
사용자 지정 구성으로 디자이너 컴포넌트 초기화
기본 구성을 사용자 지정한 후 사용자 지정 구성을 GC.Spread.Sheets.Designer.Designer 클래스에 매개 변수로 전달합니다. 아래와 같이 최대 3개의 매개 변수를 사용할 수 있습니다.
// Initialize designer with customizable configuration and spread component
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);여기서:
designerHost- HTMLElement는 디자이너의 호스트 요소를 나타냅니다.config- 레이아웃의 사용자 지정 구성 JSON을 나타내는 Object입니다.spread- 디자이너에 연결된 SpreadJS 인스턴스를 나타내는 GC.Spread.Sheets.Workbook 인스턴스입니다.
config 및 spread 매개 변수는 선택 사항입니다. 제공하지 않으면 디자이너는 기본 디자이너 컴포넌트를 사용하고 새 스프레드시트를 생성합니다.
가능한 사용자 지정
다음은 디자이너 컴포넌트에서 가능한 사용자 지정 범위를 설명합니다.
리본, 컨텍스트 메뉴, 파일 메뉴 및 사이드 패널을 포함한 디자이너 컴포넌트의 첫 번째 수준은 삭제할 수 있지만 수정하거나 추가할 수는 없습니다.
버튼, 탭, 컨텍스트 메뉴 옵션 등을 포함한 두 번째 수준 및 해당 하위 수준은 사용자 지정할 수 있습니다.
commandMap을 설정하여 명령을 등록함으로써 각 요소의 응답 또는 상호 작용을 사용자 지정할 수 있습니다.
참고:
config.commandMap에서 기본 제공 명령을 부분적으로 재정의하면 지정된 옵션이 기존 명령 구성과 병합됩니다. 기본 아이콘과 같이 지정하지 않은 옵션은 그대로 유지됩니다.
예제
가장 간단한 디자이너 컴포넌트 사용자 지정 중 하나는 리본 컴포넌트의 상태를 제어하는 것입니다. 리본이 축소된 상태로 디자이너 컴포넌트를 실행하려면 setData 메서드를 사용하여 isRibbonCollapse 상태를 true로 설정할 수 있습니다.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
// Sets state of the ribbon as collapsed.
designer.setData('isRibbonCollapse',true);기타 다양한 사용자 지정에 대해서는 다음 항목을 참조하세요.