SpreadJS 自定义键盘导航

SpreadJS已经支持许多Excel的快捷键，用于快速浏览电子表格数据。但是，有时您可能想自定义键盘快捷键组合键或实现新的Excel快捷键组合。幸运的是，SpreadJS使此操作变得容易！

该博客将向您展示如何实现CTRL和箭头键的键盘快捷键组合，以允许用户快速移动到工作表的数据区域的末尾。

为此，您将首先覆盖CTRL的默认SpreadJS键盘快捷键和一个Null的箭头键，然后创建自定义命令来模仿Excel的快速导航。您也可以参考SpreadJS的键盘导航快捷键以获取当前的按键组合。

最终效果如下：


项目设置：
我们将首先通过包含必需的SpreadJS发行文件和CSS来设置项目。

• gc.spread.sheets.all
• gc.spread.sheets.charts
• gc.spread.excelio
• gc.spread.sheets.excel2016colorful
• FileSaver
  

这些可以包含在您的项目中，如下所示：

1. <!-- Set-Up 1.) Add Scripts and CSS: SpreadJS Script Files-->
   
2.     <script
   
3.       type="text/javascript"
   
4.       src="SpreadJS\gc.spread.sheets.all.14.0.0.min.js"
   
5.     ></script>
   
6.     <link
   
7.       href="SpreadJS\gc.spread.sheets.excel2016colorful.14.0.0.css"
   
8.       rel="stylesheet"
   
9.       type="text/css"
   
10.     />

复制代码

接下来，包含一个DOM元素作为容器

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

复制代码

初始化SpreadJS组件

1. window.onload = function () {
   
2.       // Set-Up 3.) Initialize SpreadJS
   
3.       var spread = new GC.Spread.Sheets.Workbook(
   
4.         document.getElementById("ss"),
   
5.         { sheetCount: 2 }
   
6.       );
   
7.     }

复制代码

创建自定义命令功能：
我们必须编写一个新的自定义命令，当按下指定的组合键时将被触发，以便SpreadJS模仿Excel的快速导航。

调整选择：
定制命令使用此函数来调整SpreadJS单元格的选择：

1. // Adjust selection
   
2.       function getNeedAdjustSelection(selections, rowIndex, colIndex) {
   
3.         var sel = null;
   
4.         for (var i = 0; i < selections.length; i++) {
   
5.           if (selections[i].contains(rowIndex, colIndex)) {
   
6.             sel = selections[i];
   
7.           }
   
8.         }
   
9.         return sel;
   
10.       }

复制代码

右 Right:

1. // Custom select right
   
2.       function customSelectRight(workbook, options) {
   
3.         var sheet = workbook.getSheetFromName(options.sheetName);
   
4.         var activeRowIndex = sheet.getActiveRowIndex();
   
5.         var activeColIndex = sheet.getActiveColumnIndex();
   
6.         var sheetColCount = sheet.getColumnCount();
   
7. 
   
8.         var selNeedAdjust = getNeedAdjustSelection(
   
9.           sheet.getSelections(),
   
10.           activeRowIndex,
    
11.           activeColIndex
    
12.         );
    
13. 
    
14.         var findNextNotNullColIndex = function (sheet, fixRow, offset, stop) {
    
15.           while (offset < stop) {
    
16.             if (sheet.getValue(fixRow, offset) !== null) {
    
17.               break;
    
18.             }
    
19.             offset++;
    
20.           }
    
21.           return offset;
    
22.         };
    
23. 
    
24.         var rangeChangeSmall =
    
25.           selNeedAdjust.col + selNeedAdjust.colCount - 1 === activeColIndex &&
    
26.           selNeedAdjust.colCount > 1
    
27.             ? true
    
28.             : false;
    
29.         var stopSearchIndex = rangeChangeSmall ? activeColIndex : sheetColCount;
    
30.         var startSearchIndex = rangeChangeSmall
    
31.           ? selNeedAdjust.col + 1
    
32.           : selNeedAdjust.col + selNeedAdjust.colCount;
    
33. 
    
34.         var findResult = findNextNotNullColIndex(
    
35.           sheet,
    
36.           activeRowIndex,
    
37.           startSearchIndex,
    
38.           stopSearchIndex
    
39.         );
    
40. 
    
41.         if (selNeedAdjust !== null && findResult <= sheetColCount) {
    
42.           selNeedAdjust.colCount = rangeChangeSmall
    
43.             ? selNeedAdjust.colCount + selNeedAdjust.col - findResult
    
44.             : findResult - selNeedAdjust.col + 1;
    
45.           selNeedAdjust.col = rangeChangeSmall ? findResult : selNeedAdjust.col;
    
46.           sheet.repaint();
    
47.         }
    
48.       }

复制代码

左 Left:

1. // Custom select left
   
2.       function customSelectLeft(workbook, options) {
   
3.         var sheet = workbook.getSheetFromName(options.sheetName);
   
4.         var activeRowIndex = sheet.getActiveRowIndex();
   
5.         var activeColIndex = sheet.getActiveColumnIndex();
   
6. 
   
7.         var selNeedAdjust = getNeedAdjustSelection(
   
8.           sheet.getSelections(),
   
9.           activeRowIndex,
   
10.           activeColIndex
    
11.         );
    
12. 
    
13.         var findFirstNotNullColIndex = function (sheet, fixRow, offset, stop) {
    
14.           while (offset > stop) {
    
15.             if (sheet.getValue(fixRow, offset) !== null) {
    
16.               break;
    
17.             }
    
18.             offset--;
    
19.           }
    
20.           return offset;
    
21.         };
    
22.         var rangeChangeSmall =
    
23.           selNeedAdjust.col === activeColIndex && selNeedAdjust.colCount > 1
    
24.             ? true
    
25.             : false;
    
26.         var stopSearchIndex = rangeChangeSmall ? activeColIndex : 0;
    
27.         var startSearchIndex = rangeChangeSmall
    
28.           ? selNeedAdjust.col + selNeedAdjust.colCount - 1 - 1
    
29.           : selNeedAdjust.col - 1;
    
30. 
    
31.         var findResult = findFirstNotNullColIndex(
    
32.           sheet,
    
33.           activeRowIndex,
    
34.           startSearchIndex,
    
35.           stopSearchIndex
    
36.         );
    
37. 
    
38.         if (selNeedAdjust !== null && findResult >= 0) {
    
39.           selNeedAdjust.colCount = rangeChangeSmall
    
40.             ? findResult - selNeedAdjust.col + 1
    
41.             : selNeedAdjust.col - findResult + selNeedAdjust.colCount;
    
42.           selNeedAdjust.col = rangeChangeSmall ? selNeedAdjust.col : findResult;
    
43.           sheet.repaint();
    
44.         }
    
45.       }

复制代码

上 Up:

1. // Custom select up
   
2.       function customSelectUp(workbook, options) {
   
3.         var sheet = workbook.getSheetFromName(options.sheetName);
   
4.         var activeRowIndex = sheet.getActiveRowIndex();
   
5.         var activeColIndex = sheet.getActiveColumnIndex();
   
6. 
   
7.         var selNeedAdjust = getNeedAdjustSelection(
   
8.           sheet.getSelections(),
   
9.           activeRowIndex,
   
10.           activeColIndex
    
11.         );
    
12. 
    
13.         var findFirstNotNullRowIndex = function (sheet, fixCol, offset, stop) {
    
14.           while (offset > stop) {
    
15.             if (sheet.getValue(offset, fixCol) !== null) {
    
16.               break;
    
17.             }
    
18.             offset--;
    
19.           }
    
20.           return offset;
    
21.         };
    
22.         var rangeChangeSmall =
    
23.           selNeedAdjust.row === activeRowIndex && selNeedAdjust.rowCount > 1
    
24.             ? true
    
25.             : false;
    
26.         var stopSearchIndex = rangeChangeSmall ? activeRowIndex : 0;
    
27.         var startSearchIndex = rangeChangeSmall
    
28.           ? selNeedAdjust.row + selNeedAdjust.rowCount - 1 - 1
    
29.           : selNeedAdjust.row - 1;
    
30.         var findResult = findFirstNotNullRowIndex(
    
31.           sheet,
    
32.           activeColIndex,
    
33.           startSearchIndex,
    
34.           stopSearchIndex
    
35.         );
    
36. 
    
37.         if (selNeedAdjust !== null && findResult >= 0) {
    
38.           selNeedAdjust.rowCount = rangeChangeSmall
    
39.             ? findResult - selNeedAdjust.row + 1
    
40.                         : selNeedAdjust.row - findResult + selNeedAdjust.rowCount;
    
41.           selNeedAdjust.row = rangeChangeSmall ? selNeedAdjust.row : findResult;
    
42.           sheet.repaint();
    
43.         }
    
44.       }

复制代码

下 Down:

1. // Custom select down
   
2.       function customSelectDown(workbook, options) {
   
3.         var sheet = workbook.getSheetFromName(options.sheetName);
   
4.         var activeRowIndex = sheet.getActiveRowIndex();
   
5.         var activeColIndex = sheet.getActiveColumnIndex();
   
6.         var sheetRowCount = sheet.getRowCount();
   
7. 
   
8.         var selNeedAdjust = getNeedAdjustSelection(
   
9.           sheet.getSelections(),
   
10.           activeRowIndex,
    
11.           activeColIndex
    
12.         );
    
13. 
    
14.         var findNextNotNullRowIndex = function (sheet, fixCol, offset, stop) {
    
15.           while (offset < stop) {
    
16.             if (sheet.getValue(offset, fixCol) !== null) {
    
17.               break;
    
18.             }
    
19.             offset++;
    
20.           }
    
21.           return offset;
    
22.         };
    
23. 
    
24.         var rangeChangeSmall =
    
25.           selNeedAdjust.row + selNeedAdjust.rowCount - 1 === activeRowIndex &&
    
26.           selNeedAdjust.rowCount > 1
    
27.             ? true
    
28.             : false;
    
29.         var stopSearchIndex = rangeChangeSmall ? activeRowIndex : sheetRowCount;
    
30.         var startSearchIndex = rangeChangeSmall
    
31.           ? selNeedAdjust.row + 1
    
32.           : selNeedAdjust.row + selNeedAdjust.rowCount;
    
33. 
    
34.         var findResult = findNextNotNullRowIndex(
    
35.           sheet,
    
36.           activeColIndex,
    
37.           startSearchIndex,
    
38.           stopSearchIndex
    
39.         );
    
40. 
    
41.         if (selNeedAdjust !== null && findResult <= sheetRowCount) {
    
42.           selNeedAdjust.rowCount = rangeChangeSmall
    
43.             ? selNeedAdjust.rowCount + selNeedAdjust.row - findResult
    
44.             : findResult - selNeedAdjust.row + 1;
    
45.          selNeedAdjust.row = rangeChangeSmall ? findResult : selNeedAdjust.row;
    
46.           sheet.repaint();
    
47.         }
    
48.       }

复制代码

将SpreadJS的默认键盘快捷方式设置为Null
在应用这些自定义命令之前，必须将SpreadJS的Keyboard Navigation Shortcuts设置为null。

右 Right:

1. // default right
   
2.       cm.setShortcutKey(
   
3.         null,
   
4.         GC.Spread.Commands.Key.right,
   
5.         true,
   
6.         false,
   
7.         false,
   
8.         false
   
9.       );

复制代码

左 Left:

1. // default left
   
2.       cm.setShortcutKey(
   
3.         null,
   
4.         GC.Spread.Commands.Key.left,
   
5.         true,
   
6.         false,
   
7.         false,
   
8.         false
   
9.       );

复制代码

上 Up:

1. // default up
   
2.       cm.setShortcutKey(
   
3.         null,
   
4.         GC.Spread.Commands.Key.up,
   
5.         true,
   
6.         false,
   
7.         false,
   
8.         false
   
9.       );

复制代码

下 Down:

1. // default down
   
2.      cm.setShortcutKey(
   
3.         null,
   
4.         GC.Spread.Commands.Key.down,
   
5.         true,
   
6.         false,
   
7.         false,
   
8.         false
   
9.       );

复制代码

设置自定义命令快捷键
现在，我们将为每个箭头和CTRL键盘按下组合使用新的自定义命令名称设置键盘快捷键。下面，我们分解了箭头键键盘组合的自定义命令：right，left，up，down。

右 Right:

1. // custom right
   
2.         cm.setShortcutKey(
   
3.           "ctrlRight",
   
4.           GC.Spread.Commands.Key.right,
   
5.           true,
   
6.           false,
   
7.           false,
   
8.           false
   
9.         );

复制代码

左 Left:

1. // custom left
   
2.         cm.setShortcutKey(
   
3.           "ctrlLeft",
   
4.           GC.Spread.Commands.Key.left,
   
5.           true,
   
6.           false,
   
7.           false,
   
8.           false
   
9.         );

复制代码

上 Up:

1. // custom up
   
2.         cm.setShortcutKey(
   
3.           "ctrlUp",
   
4.           GC.Spread.Commands.Key.up,
   
5.           true,
   
6.           false,
   
7.           false,
   
8.           false
   
9.         );

复制代码

下 Down:

1. // custom down
   
2.         cm.setShortcutKey(
   
3.           "ctrlDown",
   
4.           GC.Spread.Commands.Key.down,
   
5.           true,
   
6.           false,
   
7.           false,
   
8.           false
   
9.         );

复制代码

将自定义命令绑定到键盘快捷键
最后，我们将自定义命令功能绑定到新键盘快捷键的命令名称。

我们首先需要使用commandManager方法获取命令管理器：

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

复制代码

然后，我们将使用register方法将新的键盘快捷键注册到自定义命令功能 ：

1. // 5.) Bind custom commands to keyboard shortcuts
   
2.         // 5.1) Get the command manager
   
3.         var cm = spread.commandManager();
   
4. // 5.2) Register the keyboard shortcuts to the custom command functions using the register method
   
5.         cm.register("ctrlLeft", customSelectLeft);
   
6.         cm.register("ctrlRight", customSelectRight);
   
7.         cm.register("ctrlDown", customSelectDown);
   
8.         cm.register("ctrlUp", customSelectUp);

复制代码