JavaScript Spreadsheet Excel 탐색

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-04-09 09:22 조회 2,580회 댓글 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);