JavaScript Spreadsheet Excel 탐색

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-01-28 16:07 조회 2,253회 댓글 0건

본문

관련링크

spreadJS 사용자 정의 명령 컨트롤

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

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

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

spread 사용자 정의 명령

프로젝트 설정:

먼저 필요한 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"
  />

그런 다음 DOM 요소를 컨테이너로 포함합니다.

<!-- Set-Up 2.) Include a DOM element as the container -->
  <div class="sample-container">
    <div id="ss" class="spread-container"></div>
  </div>

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 right
      cm.setShortcutKey(
        "ctrlRight",
        GC.Spread.Commands.Key.right,
        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);