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