기초가이드 SpreadJS 단축키 소개
페이지 정보
작성자 GrapeCity 작성일 2022-02-24 09:42 조회 1,132회 댓글 0건본문
첨부파일
관련링크
SpreadJS는 Excel에서 제공하는 수식(함수) 부터 차트, 조건부 서식 그리고 엑셀 저장과 불러오기에 이르기까지, 거의 모든 기능을 제공합니다.
또한, 개발하신 Excel 기반의 웹 솔루션을 사용하는 최종 사용자가 기존에 Excel을 사용하는 것과 동일한 환경을 제공하기 위해,
Excel에서 제공하는 기본 단축키를 웹 상에서도 최대한 많이 제공하고자 노력했습니다.
아래 내용들을 참고하여 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의 시트에 제공하기 위해서는 아래와 같은 과정이 필요합니다.
아래 링크 또는 첨부파일을 통해 "spreadjs_shortcut_command.js"를 다운받습니다.
다운받은 "spreadjs_shortcut_command.js" 를 여러분의 웹 프로젝트에 추가합니다.
아래의 코드를 작성하여, 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 키를 사용하려면 |
shift |
Shift 키를 사용하려면 |
alt |
Alt 키를 사용하려면 |
meta |
Mac OS의 Command 키나 Microsoft Windows의 윈도우 키를 사용하려면 |
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를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.