JavaScript Spreadsheet Excel 탐색
페이지 정보
작성자 GrapeCity 작성일 2021-04-09 09:22 조회 2,594회 댓글 0건본문
관련링크
SpreadJS에서는 스프레드시트 데이터를 빠르게 탐색할 수 있도록 이미 Excel의 다양한 바로 가기 키를 지원합니다. 하지만 바로 가기 키 조합을 사용자 정의하거나 새로운 Excel 바로 가기 조합을 구현하고 싶을 때가 있습니다. SpreadJS에서 이러한 작업을 쉽게 수행할 수 있습니다.
이 블로그에서는 CTRL 키와 화살표 키의 바로 가기 키 조합을 구현하여 사용자가 워크시트 데이터 영역의 끝부분으로 빠르게 이동하는 방법을 보여드리겠습니다.
이렇게 하려면 먼저 CTRL 및 화살표 키에 대한 기본 SpreadJS 바로 가기 키를 Null로 덮어쓴 다음, 사용자 정의 명령을 만들어 Excel의 빠른 탐색을 모방합니다. 또한 현재 키 조합을 보려면 를 참조하시면 됩니다.
프로젝트 설정:
1. 먼저 필요한 SpreadJS 릴리스 파일 및 css를 포함하여 프로젝트를 설정합니다.
gc.spread.sheets.all
gc.spread.sheets.charts
gc.spread.excelio
gc.spread.sheets.excel2016colorful
FileSaver
이 항목들은 다음과 같이 프로젝트에 포함할 수 있습니다.
<!-- Set-Up 1.) Add Scripts and CSS: SpreadJS Script Files--> <script type="text/javascript" src="SpreadJS\gc.spread.sheets.all.14.0.0.min.js" ></script> <link href="SpreadJS\gc.spread.sheets.excel2016colorful.14.0.0.css" rel="stylesheet" type="text/css" />
2. 그런 다음 DOM 요소를 컨테이너로 포함합니다.
<!-- Set-Up 2.) Include a DOM element as the container --> <div class="sample-container"> <div id="ss" class="spread-container"></div> </div>
3. SpreadJS 컴포넌트를 초기화합니다.
window.onload = function () { // Set-Up 3.) Initialize SpreadJS var spread = new GC.Spread.Sheets.Workbook( document.getElementById("ss"), { sheetCount: 2 } ); }
사용자 정의 명령 함수 만들기:
지정된 키 조합을 입력하면 시작될 새로운 사용자 정의 명령을 작성하여 SpreadJS가 Excel의 빠른 탐색을 모방하게 해야 합니다.
선택 조정:
이 함수는 다음과 같이 SpreadJS 셀 선택을 조정하기 위해 사용자 정의 명령에서 사용합니다.
// Adjust selection function getNeedAdjustSelection(selections, rowIndex, colIndex) { var sel = null; for (var i = 0; i < selections.length; i++) { if (selections[i].contains(rowIndex, colIndex)) { sel = selections[i]; } } return sel; }
오른쪽:
// Custom select right function customSelectRight(workbook, options) { var sheet = workbook.getSheetFromName(options.sheetName); var activeRowIndex = sheet.getActiveRowIndex(); var activeColIndex = sheet.getActiveColumnIndex(); var sheetColCount = sheet.getColumnCount(); var selNeedAdjust = getNeedAdjustSelection( sheet.getSelections(), activeRowIndex, activeColIndex ); var findNextNotNullColIndex = function (sheet, fixRow, offset, stop) { while (offset < stop) { if (sheet.getValue(fixRow, offset) !== null) { break; } offset++; } return offset; }; var rangeChangeSmall = selNeedAdjust.col + selNeedAdjust.colCount - 1 === activeColIndex && selNeedAdjust.colCount > 1 ? true : false; var stopSearchIndex = rangeChangeSmall ? activeColIndex : sheetColCount; var startSearchIndex = rangeChangeSmall ? selNeedAdjust.col + 1 : selNeedAdjust.col + selNeedAdjust.colCount; var findResult = findNextNotNullColIndex( sheet, activeRowIndex, startSearchIndex, stopSearchIndex ); if (selNeedAdjust !== null && findResult <= sheetColCount) { selNeedAdjust.colCount = rangeChangeSmall ? selNeedAdjust.colCount + selNeedAdjust.col - findResult : findResult - selNeedAdjust.col + 1; selNeedAdjust.col = rangeChangeSmall ? findResult : selNeedAdjust.col; sheet.repaint(); } }
왼쪽:
// Custom select left function customSelectLeft(workbook, options) { var sheet = workbook.getSheetFromName(options.sheetName); var activeRowIndex = sheet.getActiveRowIndex(); var activeColIndex = sheet.getActiveColumnIndex(); var selNeedAdjust = getNeedAdjustSelection( sheet.getSelections(), activeRowIndex, activeColIndex ); var findFirstNotNullColIndex = function (sheet, fixRow, offset, stop) { while (offset > stop) { if (sheet.getValue(fixRow, offset) !== null) { break; } offset--; } return offset; }; var rangeChangeSmall = selNeedAdjust.col === activeColIndex && selNeedAdjust.colCount > 1 ? true : false; var stopSearchIndex = rangeChangeSmall ? activeColIndex : 0; var startSearchIndex = rangeChangeSmall ? selNeedAdjust.col + selNeedAdjust.colCount - 1 - 1 : selNeedAdjust.col - 1; var findResult = findFirstNotNullColIndex( sheet, activeRowIndex, startSearchIndex, stopSearchIndex ); if (selNeedAdjust !== null && findResult >= 0) { selNeedAdjust.colCount = rangeChangeSmall ? findResult - selNeedAdjust.col + 1 : selNeedAdjust.col - findResult + selNeedAdjust.colCount; selNeedAdjust.col = rangeChangeSmall ? selNeedAdjust.col : findResult; sheet.repaint(); } }
위로:
// Custom select up function customSelectUp(workbook, options) { var sheet = workbook.getSheetFromName(options.sheetName); var activeRowIndex = sheet.getActiveRowIndex(); var activeColIndex = sheet.getActiveColumnIndex(); var selNeedAdjust = getNeedAdjustSelection( sheet.getSelections(), activeRowIndex, activeColIndex ); var findFirstNotNullRowIndex = function (sheet, fixCol, offset, stop) { while (offset > stop) { if (sheet.getValue(offset, fixCol) !== null) { break; } offset--; } return offset; }; var rangeChangeSmall = selNeedAdjust.row === activeRowIndex && selNeedAdjust.rowCount > 1 ? true : false; var stopSearchIndex = rangeChangeSmall ? activeRowIndex : 0; var startSearchIndex = rangeChangeSmall ? selNeedAdjust.row + selNeedAdjust.rowCount - 1 - 1 : selNeedAdjust.row - 1; var findResult = findFirstNotNullRowIndex( sheet, activeColIndex, startSearchIndex, stopSearchIndex ); if (selNeedAdjust !== null && findResult >= 0) { selNeedAdjust.rowCount = rangeChangeSmall ? findResult - selNeedAdjust.row + 1 : selNeedAdjust.row - findResult + selNeedAdjust.rowCount; selNeedAdjust.row = rangeChangeSmall ? selNeedAdjust.row : findResult; sheet.repaint(); } }
아래로:
// Custom select down function customSelectDown(workbook, options) { var sheet = workbook.getSheetFromName(options.sheetName); var activeRowIndex = sheet.getActiveRowIndex(); var activeColIndex = sheet.getActiveColumnIndex(); var sheetRowCount = sheet.getRowCount(); var selNeedAdjust = getNeedAdjustSelection( sheet.getSelections(), activeRowIndex, activeColIndex ); var findNextNotNullRowIndex = function (sheet, fixCol, offset, stop) { while (offset < stop) { if (sheet.getValue(offset, fixCol) !== null) { break; } offset++; } return offset; }; var rangeChangeSmall = selNeedAdjust.row + selNeedAdjust.rowCount - 1 === activeRowIndex && selNeedAdjust.rowCount > 1 ? true : false; var stopSearchIndex = rangeChangeSmall ? activeRowIndex : sheetRowCount; var startSearchIndex = rangeChangeSmall ? selNeedAdjust.row + 1 : selNeedAdjust.row + selNeedAdjust.rowCount; var findResult = findNextNotNullRowIndex( sheet, activeColIndex, startSearchIndex, stopSearchIndex ); if (selNeedAdjust !== null && findResult <= sheetRowCount) { selNeedAdjust.rowCount = rangeChangeSmall ? selNeedAdjust.rowCount + selNeedAdjust.row - findResult : findResult - selNeedAdjust.row + 1; selNeedAdjust.row = rangeChangeSmall ? findResult : selNeedAdjust.row; sheet.repaint(); } }
SpreadJS의 기본 바로 가기 키를 Null로 설정
이 사용자 정의 명령을 적용하려면 먼저 SpreadJS의 키보드 탐색 바로 가기를 null로 설정해야 합니다.
오른쪽
// default right cm.setShortcutKey( null, GC.Spread.Commands.Key.right, true, false, false, false );
왼쪽
// default left cm.setShortcutKey( null, GC.Spread.Commands.Key.left, true, false, false, false );
위로
// default up cm.setShortcutKey( null, GC.Spread.Commands.Key.up, true, false, false, false );
아래로
// default down cm.setShortcutKey( null, GC.Spread.Commands.Key.down, true, false, false, false );
사용자 정의 명령 바로 가기 키 설정
이제 각 화살표와 CTRL 키보드 조합에 대해 새로운 사용자 정의 명령 이름으로 바로 가기 키를 설정합니다. 아래에서는 오른쪽, 왼쪽, 위로, 아래로 화살표 키의 키보드 조합에 대한 사용자 정의 명령에 관해 자세히 설명합니다.
오른쪽
// custom right cm.setShortcutKey( "ctrlRight", GC.Spread.Commands.Key.right, true, false, false, false );
왼쪽
// custom left cm.setShortcutKey( "ctrlLeft", GC.Spread.Commands.Key.left, true, false, false, false );
위로
// custom up cm.setShortcutKey( "ctrlUp", GC.Spread.Commands.Key.up, true, false, false, false );
아래로
// custom down cm.setShortcutKey( "ctrlDown", GC.Spread.Commands.Key.down, true, false, false, false );
사용자 정의 명령을 키보드 바로 가기에 바인딩
마지막으로, 사용자 정의 명령 함수를 새로운 바로 가기 키의 명령 이름에 바인딩합니다.
먼저 다음과 같이 메서드를 사용해 명령 관리자를 가져와야 합니다.
// 5.) Bind custom commands to keyboard shortcuts // 5.1) Get the command manager var cm = spread.commandManager();
그런 다음, 메서드를 사용해 새로운 바로 가기 키를 사용자 정의 명령 함수에 등록합니다.
// 5.) Bind custom commands to keyboard shortcuts // 5.1) Get the command manager var cm = spread.commandManager(); // 5.2) Register the keyboard shortcuts to the custom command functions using the register method cm.register("ctrlLeft", customSelectLeft); cm.register("ctrlRight", customSelectRight); cm.register("ctrlDown", customSelectDown); cm.register("ctrlUp", customSelectUp);
조치 사항:
이 자습서에서 공유한 코드를 사용하면 CTRL + 화살표 키의 키보드 조합이 화살표 키 방향에 따라 행 또는 열의 현재 데이터 영역 끝으로 이동합니다.
사용자는 이 로직을 사용해 기본적으로 포함되지 않은 다른 Excel 바로 가기 키를 추가할 수 있습니다.
여기에서 SpreadJS에 대해 자세히 알아보고 할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.