JavaScript Spreadsheet Excel 탐색 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

JavaScript Spreadsheet Excel 탐색

페이지 정보

작성자 GrapeCity 작성일 21-04-09 09:22 조회 229회 댓글 0건

본문


spreadJS 사용자 정의 명령 컨트롤


SpreadJS에서는 스프레드시트 데이터를 빠르게 탐색할 수 있도록 이미 Excel의 다양한 바로 가기 키를 지원합니다. 하지만 바로 가기 키 조합을 사용자 정의하거나 새로운 Excel 바로 가기 조합을 구현하고 싶을 때가 있습니다. SpreadJS에서 이러한 작업을 쉽게 수행할 수 있습니다.


이 블로그에서는 CTRL 키와 화살표 키의 바로 가기 키 조합을 구현하여 사용자가 워크시트 데이터 영역의 끝부분으로 빠르게 이동하는 방법을 보여드리겠습니다.


이렇게 하려면 먼저 CTRL 및 화살표 키에 대한 기본 SpreadJS 바로 가기 키를 Null로 덮어쓴 다음, 사용자 정의 명령을 만들어 Excel의 빠른 탐색을 모방합니다. 또한 현재 키 조합을 보려면 SpreadJS의 키보드 탐색 바로 가기를 참조하시면 됩니다.


spread 사용자 정의 명령


프로젝트 설정:


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 키보드 조합에 대해 새로운 사용자 정의 명령 이름으로 바로 가기 키를 설정합니다. 아래에서는 오른쪽, 왼쪽, 위로, 아래로 화살표 키의 키보드 조합에 대한 사용자 정의 명령에 관해 자세히 설명합니다.


바로 가기 키 설정에 대해 자세히 알아볼 수 있는 SpreadJS 문서로 연결되는 링크입니다.


오른쪽

// 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
      );
 

사용자 정의 명령을 키보드 바로 가기에 바인딩

마지막으로, 사용자 정의 명령 함수를 새로운 바로 가기 키의 명령 이름에 바인딩합니다.

먼저 다음과 같이 commandManager 메서드를 사용해 명령 관리자를 가져와야 합니다.

// 5.) Bind custom commands to keyboard shortcuts
      // 5.1) Get the command manager
      var cm = spread.commandManager();


그런 다음, register 메서드를 사용해 새로운 바로 가기 키를 사용자 정의 명령 함수에 등록합니다.

// 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 + 화살표 키의 키보드 조합이 화살표 키 방향에 따라 행 또는 열의 현재 데이터 영역 끝으로 이동합니다.

spreadJS 사용자 정의 명령 컨트롤


사용자는 이 로직을 사용해 기본적으로 포함되지 않은 다른 Excel 바로 가기 키를 추가할 수 있습니다.


여기에서 SpreadJS에 대해 자세히 알아보고 30일 평가판을 다운로드할 수 있습니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.