컨텍스트 메뉴

컨텍스트 메뉴는 단일 수준 또는 다중 수준의 팝업 메뉴로, 사용자가 워크시트에서 마우스 오른쪽 클릭으로 상호작용할 때 선택 항목(메뉴 아이템) 을 제공합니다.

SpreadJS는 사용자가 스프레드시트에서 마우스 오른쪽 클릭 이벤트를 발생시키면 표시되는 기본 제공 컨텍스트 메뉴를 지원합니다. 이를 통해 중요하거나 반복적인 작업을 빠르게 실행할 수 있는 유연성을 제공합니다.

메뉴 항목은 워크시트에서 클릭한 영역에 따라 다르게 표시되며, 사용자 정의 메뉴 항목을 추가하거나 제거하여 컨텍스트 메뉴의 구조를 자유롭게 커스터마이즈할 수 있습니다.

다음 이미지는 기본 제공 컨텍스트 메뉴와 위/아래 스크롤 표시 아이콘을 보여줍니다. 이러한 인디케이터는 메뉴가 창에 완전히 표시되지 않을 경우 나타납니다. 해당 인디케이터에 마우스를 올리면 해당 방향으로 메뉴가 스크롤되며, 클릭 시에는 즉시 해당 방향으로 스크롤됩니다.

기본 컨텍스트 메뉴 사용자 지정

SpreadJS는 GC.Spread.Sheets.ContextMenu.MenuView 클래스를 통해 기본 컨텍스트 메뉴의 커스터마이징을 지원합니다. 정의된 스타일 클래스를 재정의하여 다른 스타일을 적용할 수 있으며, 단일 수준 및 다중 수준 컨텍스트 메뉴에 대해 사용자 정의 메뉴 항목을 추가하거나 제거할 수 있습니다.

다만, 생성되는 메뉴 구조는 menu view 설정 및 마우스로 클릭한 영역에 따라 달라질 수 있습니다.

SpreadJS는 컨텍스트 메뉴에 대해 Spread와 유사한 테마를 제공하므로, 메뉴의 외형 및 구조를 수정할 수 있습니다. 또한 필터 컨텍스트 메뉴의 데이터 결과도 조정할 수 있습니다.

기본 컨텍스트 메뉴 표시 설정

GC.Spread.Sheets.Workbook 클래스의 allowContextMenu 속성은 기본 제공 컨텍스트 메뉴를 표시할지 여부를 제어할 수 있는 옵션을 사용자에게 제공합니다. 기본적으로 이 옵션은 true로 설정되어 있어, 사용자가 스프레드시트에서 마우스 오른쪽 클릭을 할 때마다 컨텍스트 메뉴가 표시됩니다.

또한, 각각의 MenuView 클래스 메서드를 사용하여 컨텍스트 메뉴의 최대 높이와 스크롤 가능한 인디케이터 표시 여부를 설정할 수 있습니다.

MenuView.maxHeight 메서드는 정수 값을 받고, MenuView.scrollable 메서드는 불리언 값을 받습니다. 기본적으로 이 값은 true로 설정되어 있어 스크롤 인디케이터가 표시됩니다.

// 컨텍스트 메뉴를 사용하지 않으려면, 컨텍스트 메뉴 옵션을 끄
var spread = $('#ss').data('workbook');
spread.options.allowContextMenu = false;
//  컨텍스트 메뉴의 스크롤 속성을 true로 설정
spread.contextMenu.menuView.scrollable(true);
spread.contextMenu.menuView.maxHeight(400);

컨텍스트 메뉴의 보기 및 구조 사용자 정의

이 속성은 MenuView.createMenuItemElement 메서드를 사용하여 메뉴 항목의 보기와 구조를 사용자 정의할 수 있도록 해줍니다.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
function CustomMenuView() {}
CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
  // 직접 메뉴 항목 뷰를 생성합니다.
  // 필요에 따라 상위 클래스의 createMenuItemElement를 호출하고 일부 메뉴 항목만 사용자 정의할 수 있습니다.
  // 최종적으로 메뉴 항목 뷰를 반환해야 합니다.
};
spread.contextMenu.menuView = new CustomMenuView();

사용자 정의 메뉴 옵션 추가/제거

이 기능을 사용하면 컨텍스트 메뉴에서 사용자 정의 메뉴 옵션을 추가하거나 제거할 수 있습니다.

각 옵션은 JSON 스키마로 정의된 메뉴 데이터 형식을 따릅니다.

//메뉴 데이터 정
var openDialog = {
    text: 'Open Dialog',
    name: 'openDialog',
    command: showLoginDialog,
    workArea: 'viewport'
};
spread.contextMenu.menuData.push(openDialog);
function showLoginDialog() {
    //코드 추가
} 
// 사용자 지정 메뉴 옵션 추가/삭제
$.each(spread.contextMenu.menuData, function (p, v) {
    if (v.name === 'openDialog') { //openDialog 명령 이름
        spread.contextMenu.menuData.splice(p, 1)
    }
});