[javascript] SlickGrid의 콘텍스트 메뉴 설정

01 Dec 2023

javascript

SlickGrid은 유연하고 강력한 JavaScript 그리드 라이브러리입니다. 콘텍스트 메뉴는 사용자가 그리드 셀에 마우스 오른쪽 버튼을 클릭했을 때 표시되는 메뉴입니다. 이 문서에서는 SlickGrid에서 콘텍스트 메뉴를 설정하는 방법에 대해 알아보겠습니다.

콘텍스트 메뉴 구성

SlickGrid에 콘텍스트 메뉴를 추가하기 위해서는 다음과 같은 단계를 따릅니다.

slick.contextmenu.js 파일을 포함하고 필요한 CSS 스타일을 로드합니다.
ContextMenu 객체를 생성하고 메뉴 아이템을 설정합니다.
그리드에 contextmenu 이벤트 리스너를 추가하고 메뉴를 표시할 위치를 지정합니다.

// slickgrid의 필수 파일과 CSS 스타일을 로드합니다.
<script src="slickgrid/slick.core.js"></script>
<script src="slickgrid/slick.grid.js"></script>
<link rel="stylesheet" type="text/css" href="slickgrid/slick.grid.css">
<link rel="stylesheet" type="text/css" href="slickgrid/slick-default-theme.css">

// 컨텍스트 메뉴를 생성하고 메뉴 아이템을 설정합니다.
var contextMenu = new Slick.Controls.ContextMenu({
  menuItems: [
    {
      title: '메뉴 항목 1',
      command: 'menu-item-1',
      tooltip: '메뉴 항목 1의 툴팁'
    },
    {
      title: '메뉴 항목 2',
      command: 'menu-item-2',
      tooltip: '메뉴 항목 2의 툴팁'
    },
    {
      title: '메뉴 항목 3',
      command: 'menu-item-3',
      tooltip: '메뉴 항목 3의 툴팁'
    }
  ]
});

// 그리드에 contextmenu 이벤트 리스너를 추가하고 메뉴를 표시할 위치를 지정합니다.
grid.onContextMenu.subscribe(function (e) {
  e.preventDefault();
  contextMenu.show(e);
});

위 코드에서는 menuItems 배열에 메뉴 아이템을 설정한 뒤 Slick.Controls.ContextMenu 객체를 생성합니다. 그리드에 contextmenu 이벤트 리스너를 추가하여 메뉴를 표시할 위치를 지정합니다.

콘텍스트 메뉴 이벤트 핸들링

SlickGrid의 콘텍스트 메뉴를 클릭했을 때 발생하는 이벤트를 처리하기 위해서는 onCommand 이벤트 핸들러를 설정해야 합니다. 예를 들어, 메뉴 아이템 1을 클릭했을 때의 동작을 추가하는 방법은 다음과 같습니다.

// onCommand 이벤트 핸들러를 정의합니다.
contextMenu.onCommand.subscribe(function (e, args) {
  var command = args.command;
  if (command === 'menu-item-1') {
    // 메뉴 아이템 1을 클릭했을 때의 동작을 구현합니다.
    alert('메뉴 아이템 1을 클릭했습니다.');
  }
});

위 코드에서는 onCommand 이벤트 핸들러를 정의하여 클릭된 메뉴 아이템의 command 속성 값을 확인하고 필요한 동작을 구현합니다.

결론

SlickGrid의 콘텍스트 메뉴를 설정하는 방법에 대해 알아보았습니다. slick.contextmenu.js 파일과 필요한 CSS 스타일을 로드한 뒤 ContextMenu 객체를 생성하고 메뉴 항목을 설정한 다음, 그리드에 contextmenu 이벤트를 추가하여 콘텍스트 메뉴를 표시할 수 있습니다. 이벤트 핸들러를 설정하여 메뉴 아이템의 클릭 이벤트를 처리할 수도 있습니다.