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

SpreadJS 단축키 소개 > 온라인 스터디

본문 바로가기

기초가이드 SpreadJS 단축키 소개

페이지 정보

작성자 GrapeCity 작성일 2022-02-24 09:42 조회 1,132회 댓글 0건

본문

첨부파일

SpreadJS는 여러분의 웹 애플리케이션에 MS Excel과 호환되며 Excel과 유사한 기능을 제공하고자 할 때 사용할 수 있는 순수 JavaScript 기반의 클라이언트 사이드 스프레트시트 UI 컴포넌트입니다.

SpreadJS는 Excel에서 제공하는 수식(함수) 부터 차트, 조건부 서식 그리고 엑셀 저장과 불러오기에 이르기까지, 거의 모든 기능을 제공합니다.

또한, 개발하신 Excel 기반의 웹 솔루션을 사용하는 최종 사용자가 기존에 Excel을 사용하는 것과 동일한 환경을 제공하기 위해,

Excel에서 제공하는 기본 단축키를 웹 상에서도 최대한 많이 제공하고자 노력했습니다.

이번 글에서는 SpreadJS에서 기본으로 제공되는 단축키의 종류와 GrapeCity 제공 커스텀 단축키 추가 방법, 그리고 SpreadJS 단축키를 커스터마이징하는 방법을 설명합니다.

아래 내용들을 참고하여 SpreadJS에 원하는 단축키를 추가해보세요!




SpreadJS 기본 제공 단축키

SpreadJS에서 기본으로 제공되는 단축키입니다.

별도의 세팅 없이 최종 사용자에게 아래 단축키를 제공할 수 있습니다.

작업
Up (↑)한 셀 위로 이동합니다.
Down (↓)한 셀 아래로 이동합니다.
Left (←)한 셀 왼쪽으로 이동합니다.
Right (→)한 셀 오른쪽으로 이동합니다.
PageUp시트에서 한 화면 위로 이동합니다.
PageDown시트에서 한 화면 아래로 이동합니다.
Home시트의 가장 왼쪽 열로 이동합니다.
End시트의 가장 오른쪽 열로 이동합니다.
Tab다음 셀로 이동합니다.
Back입력된 값을 지우고 수정 모드를 유지합니다.
Delete입력된 값을 지웁니다.
Enter입력을 완료하고 아래 셀로 이동합니다.
ESC입력을 취소합니다.
Ctrl+Up시트의 맨 위 행으로 이동합니다.
Ctrl+Down시트의 맨 아래 행으로 이동합니다.
Ctrl+Left시트의 가장 왼쪽 열로 이동합니다.
Ctrl+Right시트의 가장 오른쪽 열로 이동합니다.
Ctrl+PageUp이전 시트로 이동합니다. (IE만 가능)
Ctrl+PageDown다음 시트로 이동합니다. (IE만 가능)
Ctrl+Home시트의 첫 셀로 이동합니다.
Ctrl+End시트의 마지막 셀로 이동합니다.
Ctrl+C선택된 셀을 복사합니다.
Ctrl+X선택된 셀을 잘라냅니다.
Ctrl+V선택된 셀을 붙여넣습니다.
Ctrl+Z최근 작업의 실행을 취소합니다.
Ctrl+Y실행을 취소한 작업을 되돌립니다.
Shift+Up셀 선택 영역을 위로 확장합니다.
Shift+Down셀 선택 영역을 아래로 확장합니다.
Shift+Left셀 선택 영역을 왼쪽으로 확장합니다.
Shift+Right셀 선택 영역을 오른쪽으로 확장합니다.
Shift+PageUp시트에서 한 화면 위로 셀 선택 영역을 확장합니다.
Shift+PageDown시트에서 한 화면 아래로 셀 선택 영역을 확장합니다.
Shift+Home시트의 가장 왼쪽 열까지 셀 선택 영역을 확장합니다.
Shift+End시트의 가장 오른쪽 열까지 셀 선택 영역을 확장합니다.
Shift+Tab이전 셀로 이동합니다.
Shift+Enter입력을 완료하고 위 셀로 이동합니다.
Ctrl+Shift+Up시트의 맨 위 행까지 셀 선택 영역을 확장합니다.
Ctrl+Shift+Down시트의 맨 아래 행까지 셀 선택 영역을 확장합니다.
Ctrl+Shift+Left시트의 가장 왼쪽 열까지 셀 선택 영역을 확장합니다.
Ctrl+Shift+Right시트의 가장 오른쪽 열까지 셀 선택 영역을 확장합니다.
Ctrl+Shift+Home시트의 첫 셀까지 셀 선택 영역을 확장합니다.
Ctrl+Shift+End시트의 마지막 셀까지 셀 선택 영역을 확장합니다.
Alt+Enter셀 편집 시 새 줄이 시작됩니다.

참고: 키보드 단축키를 사용한 복사 및 붙여넣기 작업에 대한 추가 정보

  • SpreadJS는 자바스크립트 특성 상 시스템 클립보드에 직접 접근할 수 없으므로 자체 클립보드를 가지고 있습니다.

  • Ctrl+C를 사용하여 SpreadJS에서 복사할 때 외부(시스템 클립보드) 복사와 내부(자체 클립보드) 복사를 모두 수행합니다.

  • Ctrl+V를 사용하여 SpreadJS에 붙여넣을 때 Ctrl+C를 사용하여 수행된 복사에 따라 외부(시스템 클립보드) 붙여넣기를 할 지 내부(자체 클립보드) 붙여넣기를 할 지 결정됩니다.

  • 컨텍스트 메뉴 또는 명령 관리자를 사용할 때 SpreadJS는 시스템 클립보드에 접근할 수 없기 때문에 항상 내부(자체 클립보드) 복사 및 내부(자체 클립보드) 붙여넣기를 수행합니다.

  • SpreadJS의 단축키가 브라우저 단축키와 중복되는 경우에는 우선 순위에 의해 동작하지 않을 수 있습니다.




GrapeCity 제공 커스텀 단축키


이번 섹션에서는 많은 고객 분들의 피드백을 반영하여 GrapeCity에서 미리 정의한 커스텀 단축키를 여러분의 SpreadJS에 추가하는 방법에 대해서 설명합니다.

이를 통해 기본 제공 단축키와 함께 GrapeCity 커스텀 단축키를 최종 사용자에게 제공하실 수 있습니다.

GrapeCity에서 제공하는 커스텀 단축키는 아래와 같습니다.

작업
Ctrl+D선택한 범위의 위에 있는 셀의 내용 및 형식을 아래 셀로 복사합니다.
Ctrl+R선택한 범위의 왼쪽에 있는 셀의 내용 및 형식을 오른쪽 셀로 복사합니다.
Ctrl+A전체 셀을 선택합니다.
Ctrl+B굵은 글꼴을 적용합니다.
Ctrl+I기울임꼴을 적용합니다.
Ctrl+U텍스트에 밑줄을 긋습니다.
Ctrl+9선택한 행을 숨깁니다.
Ctrl+"["참조되는 셀로 이동합니다.
Ctrl+"]"참조하는 셀로 이동합니다.
Ctrl+";"현재 날짜를 입력합니다.
Ctrl+"-"선택한 행 또는 열을 삭제합니다.
Ctrl+Space전체 열을 선택합니다.
Ctrl+Shift+"+"행 또는 열을 추가합니다.
Ctrl+Shift+"%"백분율 형식을 적용합니다.
Shift+Space전체 행을 선택합니다.
Alt+"="SUM 함수를 삽입합니다.
Alt+";"숨겨지지 않은 셀 전체를 선택합니다.
Alt+Shift+Right선택 범위를 그룹화합니다.
Alt+Shift+Left선택 범위를 그룹화 해제합니다.

위의 단축키를 SpreadJS의 시트에 제공하기 위해서는 아래와 같은 과정이 필요합니다.

  1. 아래 링크 또는 첨부파일을 통해 "spreadjs_shortcut_command.js"를 다운받습니다.

  1. 다운받은 "spreadjs_shortcut_command.js" 를 여러분의 웹 프로젝트에 추가합니다.

  2. 아래의 코드를 작성하여, GrapeCity 커스텀 단축키를 추가할 수 있으며, 이를 사용하기 위한 준비가 끝납니다.

    window.onload = function () {
      var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:2});
      Shortcut.addSpreadShortcut(workbook);
    }

    아래는 실제 SpreadJS로 구현된 화면입니다. 단축키의 동작을 테스트 해보실 수 있습니다.




SpreadJS 단축키 명령 커스터마이징 방법


만약, 사용자의 요청에 의하여, SpreadJS에 기본으로 등록되어 있는 명령에 대한 단축키의 명령를 다른 단축키로 변경을 해야하는 경우, 아래와 같은 방법을 통하여 단축키와 명령어의 맵핑을 수정하고 새롭게 확장할 수 있습니다.


단축키 + 명령어 맵핑 리스트 확인 방법

먼저, 변경하고자 하는 단축키와 맹핑된 명령어의 리스트를 확인하기 위해서, 아래와 같이

spread.commandManager()를 콘솔 창에 로그를 찍어 기본으로 등록되어 있는 명령들을 확인할 수 있습니다.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
console.log(spread.commandManager());


아래와 같이 명령을 확인할 수 있습니다.


 

setShortcutKey 함수를 통한 단축키 설정 변경 방법

위의 console.log(spread.commandManager()); 명령을 통해서, 변경하고자 하는 단축키와 맵핀된 엑션을 찾았다면, 이제 setShortcutKey() 함수를 통해, 단축키와 명령어의 맵핑을 새롭게 정의할 수 있습니다.

setShortcutKey() 메소드에 대한 변수는 아래와 같습니다.


function setShortcutKey (

commandName : string,

key : undefined,

ctrl : boolean,

shift : boolean,

alt : boolean,

meta : boolean

) : any;



매개변수

 commandName

명령 이름, 명령 이름을 'undefined'로 설정하면 해당 단축키에 바인딩된 명령을 제거합니다.

 key

 키 코드(ASCII), 키 코드를 'undefined'로 설정하면 해당 명령의 단축키를 제거합니다.

 ctrl

 Ctrl 키를 사용하려면 true, 그렇지 않으면 false를 입력합니다.

 shift

 Shift 키를 사용하려면 true, 그렇지 않으면 false를 입력합니다.

 alt

 Alt 키를 사용하려면 true, 그렇지 않으면 false를 입력합니다.

 meta

 Mac OS의 Command 키나 Microsoft Windows의 윈도우 키를 사용하려면 true, 그렇지 않으면 false를 입력합니다.



setShortcutKey를 명령을 통한 단축키 설정 변경 예시

아래는 setShortcutKey() 메소드를 사용하는 여러 예제입니다.

  • 셀의 내용을 지우는 clear 명령에 대한 단축키를 지정합니다.

    //Ctrl+Shift+b
    spread.commandManager().setShortcutKey("clear","B".charCodeAt(0),true,true,false,false);

    * 이때, 기존에 clear 명령을 실행하던 Delete 키는 더 이상 동작하지 않습니다.  

  • 위, 아래 화살표 키의 명령을 변경합니다.

    //위 화살표 키의 명령을 Page Up으로 변경합니다.
    spread.commandManager().setShortcutKey("navigationPageUp", GC.Spread.Commands.Key.up, false, false, false, false);
    //아래 화살표 키의 명령을 Page Down으로 변경합니다.
    spread.commandManager().setShortcutKey("navigationPageDown", GC.Spread.Commands.Key.down, false, false, false, false);

  • Enter 키에 대한 사용자 정의 명령을 생성합니다.

    var activeSheet = spread.getActiveSheet();
    ​
    spread.commandManager().register('myCmd',
     function ColorAction() {
       activeSheet.getCell(activeSheet.getActiveRowIndex(),activeSheet.getActiveColumnIndex()).backColor("red");
     }
    );
    spread.commandManager().setShortcutKey('myCmd', GC.Spread.Commands.Key.enter, false, false, false, false);

  • 위, 아래 방향키의 명령을 제거하여 기본 키 명령을 비활성화합니다.

    spread.commandManager().setShortcutKey(undefined, GC.Spread.Commands.Key.up, false, false,  false, false);
    spread.commandManager().setShortcutKey(undefined, GC.Spread.Commands.Key.down, false, false, false, false);

     



(중요) F2 키를 이용하여 셀 편집하기


Excel 사용자들은 F2 키를 이용하여 셀 편집 모드로 들어가는 것이 익숙할 수 있습니다.

SpreadJS에서 F2 키를 이용하여 동작할 수 있도록 하려면 단축키 등록이 아닌 이벤트리스너를 사용하여 아래와 같이 쉽게 작성할 수 있습니다.

window.onload = function () {
  var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:2});
  workbook.getHost().addEventListener("keydown", function(e) {
    if (e.keyCode !== 113) {
      return;
    }
    var sheet = workbook.getActiveSheet();
    if (sheet.isEditing()) {
      return;
    }    
    sheet.startEdit();
  });
}

아래는 실제 SpreadJS로 구현된 화면입니다. F2 키의 동작을 테스트 해보실 수 있습니다.





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

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

댓글목록

등록된 댓글이 없습니다.

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

태그1

인기글

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