[SpreadJS] 컨텍스트 메뉴

SpreadJS 의 시트에서 마우스 우 클릭을 하게 되면 컨텍스트 메뉴가 뜬다. 웹 화면을 구성하면서 시트에 우클릭 했을 때 뜨는 컨텍스트 메뉴를 별도로 커스터마이징 해야 했는데 그래서 이번엔 컨텍스트 메뉴와 관련된 내용을 정리할 것 이다.

---

컨텍스트 메뉴

SpreadJS 의 컨텍스트 메뉴는 앞에서 말한 것과 같이 시트에서 마우스 우 클릭해서 확인 할 수 있다.

SpreadJS 에서 제공하는 컨텍스트 메뉴를 쓰지 않을려고 하면 spread.options.allowContextMenu 옵션을 false 로 지정하면 된다.

 

 <<코드 예시>>

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
spread.options.allowContextMenu = false;

[참고 링크 : SpreadJS 컨텍스트 메뉴 소개 데모]

소개 | 기능별 학습 | SpreadJS 데모

---

컨텍스트 메뉴 추가하기

• spread.contextMenu.menuData 속성에 원하는 메뉴에 대한 옵션을 설정한 객체를 추가하여 새로운 컨택스트 메뉴를 생성
• 생성하고자 하는 메뉴를 설정하는 옵션을 이용해서 메뉴를 커스터 마이징
  • name : 컨텍스트 메뉴를 판별하는 이름. string 형태
  • text : 컨텍스트 메뉴에서 해당 메뉴 항목에 표현되는 내용. 만약 컨텍스트 메뉴 항목이 그룹 형태이면, 그 그룹를 나타내는 DOM 요소의 title 속성 값으로 들어감. string 형태.
  • command : 메뉴 선택(클릭) 시, 실행되는 동작. string 혹은 함수 형태. string 으로 들어가는 command 의 경우, 이를 사용하기 위해서는 spread.commandManager() 를 통해서 해당 동작에 대해 선언해주어야 함.
  • disable : 컨택스트 메뉴 활성화 여부. 기본값은 false
  • iconClass : 컨텍스트 메뉴 항목의 텍스트 앞에 표현되는 아이콘 혹은 이미지를 설정하는 id 속성. CSS 스타일 속성에서 해당 속성을 id 식별자로 불러와 설정.
  • group : 컨텍스트 메뉴 항목을 그룹 형태로 나타냄.(ex. 컨텍스트 메뉴의 '붙여넣기 옵션') 해당 속성의 value 값은 메뉴 항목의 헤더 값으로 설정 됨.
  • subMenu : 하위 항목들을 가지는 컨텍스트 메뉴를 설정. 객체 배열의 형태
  • type : 컨텍스트 메뉴의 형태
  • workArea : 컨텍스트 메뉴가 동작하는 위치.
    • "sheetTab" : 시트의 탭 부분.
    • "outline" : 아웃라인 부분.
    • "viewport" : 시트 부분.
    • "rowHeader" : 행 헤더 부분.
    • "colHeader" : 열 헤더 부분.
    • "comment" : 메모 부분.
    • "slicer" : 슬라이서 부분.
    • "corner" : 시트의 모든 셀을 선택하는 열 및 행 헤더가 겹치는 부분에 위치한 코너 부분.
• 객체 추가 시, push 메서드 이용

 <<코드 예시>>

var commandManager = spread.commandManager();
var markWithRedBg = {
    text: "Format Cells",
    name: "markWithRedBg",
    command: "markWithRedBg",
    workArea: "viewport"
};
spread.contextMenu.menuData.push(markWithRedBg);
var markWithRedBgCommand = {
    canUndo: false,
    execute: function () {
        var style = new GC.Spread.Sheets.Style();
        style.name = 'style1';
        style.backColor = 'red';
        var sheet = spread.getActiveSheet();
        sheet.suspendPaint();
        var selections = sheet.getSelections();
        var selectionIndex = 0, selectionCount = selections.length;
        for (; selectionIndex < selectionCount; selectionIndex++) {
            var selection = selections[selectionIndex];
            for (var i = selection.row; i < (selection.row + selection.rowCount); i++) {
                for (var j = selection.col; j < (selection.col + selection.colCount); j++) {
                    sheet.setStyle(i, j, style, GC.Spread.Sheets.SheetArea.viewport);
                }
            }
        }
        sheet.resumePaint();
    }
};
commandManager.register("markWithRedBg", markWithRedBgCommand, null, false, false, false, false);

[참고 링크 : SpreadJS 사용자 정의 메뉴보기 데모] | [참고 링크 : SpreadJS 확장된 컨텍스트 메뉴 데모]
[참고 링크 : SpreadJS menuData API]

사용자 정의 메뉴보기 | 기능별 학습 | SpreadJS 데모

확장된 상황에 맞는 메뉴 | 기능별 학습 | SpreadJS 데모

GC.Spread.Sheets.ContextMenu.ContextMenu | JavaScript Spreadsheet | SpreadJS

---

컨텍스트 메뉴 삭제하기

• spread.contextMenu.menuData 속성에 지정된 메뉴들을 불러온 후 특정 메뉴에 해당하는 객체를 제거
• 제거 시 splice 메서드 이용

 <<코드 예시>>

$.each(spread.contextMenu.menuData, function (p, v) {
    if (v.name === 'openDialog') { // name 속성이 'openDialog'인 메뉴 객체 일 떄
        spread.contextMenu.menuData.splice(p, 1)
    }
});

[참고 링크 : SpreadJS 확장된 컨텍스트 메뉴 데모]

확장된 상황에 맞는 메뉴 | 기능별 학습 | SpreadJS 데모

---

컨텍스트 메뉴 스크롤

SpreadJS 에서 제공하는 컨텍스트 메뉴 리스트의 높이도 설정할 수 있다. spread.contextMenu.menuView.maxHeight 메서드로 최대 높이를 설정하면 된다. 대신 너무 높이 값이 작으면 메뉴 항목이 전부 안보여서 선택 할 수 없게 되므로 spread.contextMenu.menuView.scrollable 메서드를 사용해서 컨텍스트 메뉴 리스트가 스크롤 되게 설정해야 한다.

 

<<코드 예시>>

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
spread.contextMenu.menuView.scrollable(true);
spread.contextMenu.menuView.maxHeight(150);

[참고 링크 : SpreadJS 컨텍스트 메뉴 스크롤 데모]

상황에 맞는 메뉴 스크롤 | 기능별 학습 | SpreadJS 데모

---

결론

SpreadJS 에서는 별도로 제공하는 컨텍스트 메뉴가 있으며, 해당 메뉴들을 쓰지 않으려면 spread.options.allowContextMenu 옵션을 false 로 지정하면 된다.
컨텍스트 메뉴는 push 메서드와 splice 메서드를 통해 추가하거나 제거할 수 있다.
컨텍스트 메뉴 추가 시, 추가할 메뉴 객체의 옵션을 설정하여 커스터 마이징 할 수 있다.
SpreadJS 에서 제공하는 컨텍스트 메뉴 리스트의 높이는 조정 가능하며 리스트의 스크롤 여부를 설정 할 수 있다.