! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

컨텍스트 메뉴 - 디자이너 컴포넌트 > 온라인 스터디

본문 바로가기

디자이너컴포넌트 컨텍스트 메뉴 - 디자이너 컴포넌트

페이지 정보

작성자 GrapeCity 작성일 2022-02-15 15:44 조회 913회 댓글 0건

본문

최근 기업과 정부의 디지털 트랜스포메이션이 가속화됨에 따라, 기존의 Excel(엑셀) 문서를 온라인 시스템에 통합하고, 이러한 엑셀 문서를 웹 상에서 관리하고 편집하고자 하는 요구 사항이 점점 많아지고 있습니다.

이를 위해, 웹 상에 구글 시트(Google Sheet) 또는 MS Office 365와 같이 기존의 Excel 파일과 호환이 되고, 최종 사용자가 기존의 MS Excel을 사용하는 것과 동일한 방식으로 사용할 수 있는 Excel(엑셀) 에디터를 구현하는 것은 결코 쉬운 일이 아닐 것 입니다.

이러한 요구 사항에 맞추어 GrapeCity에서는 개발자 분들이 조금이라고 쉽고 빠르게 웹 상에 Excel(엑셀) 스프레드시트의 UI와 엑셀 기능들을 구현할 수 있는 컨트롤과 함수를 제공하는 SpreadJS를 제공하고 있으며, 또한, 완전한 Excel 에디터 기능을 원하시는 개발자 분들을 위해, SpreadJS를 기반으로 하는 SpreadJS 디자이너 컴포넌트를 제공하고 있습니다.



 

SpreadJS 디자이너 컴포넌트는 구글 시트, 온라인 MS Excel과 유사한 UI, 메뉴 구조 그리고 Excel의 기능을 웹 페이지 상에 구현하고자 하시는 분들을 위한 완전한 Front-End Excel 에디터입니다.

디자이너 컴포넌트에는 아래와 같은 요소들이 포함되어 있습니다.

  • 리본 메뉴
  • 수식 표시줄
  • 상태 표시줄
  • 측면 패널
  • 컨텍스트 메뉴

기본적으로 구성된 컴포넌트를 그대로 사용할 수도 있지만, 원하시는 형태에 맞게 커스터마이징하여 사용하실 수 있습니다.


이번 글에서는 디자이너 컴포넌트를 커스터마이징하는 방법 중, 컨텍스트 메뉴에 항목을 추가하거나 제거하는 방법을 소개합니다.


"탭, 버튼, 대화상자, 파일 불러오기 이벤트 바인딩, 상태 표시줄, 사용자 지정 컴포넌트, 지역화"와 같은 추가적인 디자이너 컴포넌트를 커스터마이징 하는 방법을 확인 하고자 하시는 경우에는,

여기를 눌러 해당 글 목록을 확인하실 수 있습니다.


해당 내용들을 참고하여 디자이너 컴포넌트를 여러분이 원하는 대로 커스터마이징해 보시기 바랍니다.


아래 화면은 실제 디자이너 컴포넌트로 구현된 화면입니다. 상단의 HTML / JS 탭을 통해 소스코드를 확인하고 바로 수정해 결과를 확인해볼 수 있습니다.




컨텍스트 메뉴에 항목 추가 / 제거

컨텍스트 메뉴에 항목 추가하기

아래와 같이 컨텍스트 메뉴에 원하는 이름의 항목을 추가할 수 있습니다.

아래 코드에서는 "서명 삽입"이라는 항목을 추가합니다.

// 기본 config 접근
var config = GC.Spread.Sheets.Designer.DefaultConfig;

// 컨텍스트 메뉴에 항목 추가
if (config && config.contextMenu) {
	config.contextMenu.unshift("insertSignatureMenu");
}

// 새 컨텍스트 메뉴 항목에 대한 명령 생성
config.commandMap = {
	"insertSignatureMenu": {
		text: "서명 삽입",
		commandName: "insertSignatureMenu",
		visibleContext: "ClickViewport",	//"ClickRowHeader", "ClickColHeader"

		// 실행 시 동작 입력
		execute: () => {
			console.log("서명 삽입");
		}   
	}
}

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);






컨텍스트 메뉴의 항목 제거하기


아래와 같이 컨텍스트 메뉴의 항목을 제거할 수 있습니다.

  1. 아래 코드를 통해 contextMenu를 확인할 수 있습니다.

    console.log(config.contextMenu);


  2. 원하는 항목을 지웁니다.
    
    config.contextMenu.splice(0,1);

"탭, 버튼, 대화상자, 파일 불러오기 이벤트 바인딩, 상태 표시줄, 사용자 지정 컴포넌트, 지역화"와 같은 추가적인 디자이너 컴포넌트를 커스터마이징 하는 방법을 확인 하고자 하시는 경우,

여기를 눌러 글 목록을 확인해 보세요.




지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.