SpreadJS 自定义键盘导航
本帖最后由 AlexZ 于 2021-2-1 15:15 编辑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
这些可以包含在您的项目中，如下所示：
<!-- 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.contains(rowIndex, colIndex)) {
sel = selections;
}
}
return sel;
}右 Right:
// 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();
}
}左 Left:
// 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();
}
}上 Up:
// 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();
}
}下 Down:
// 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的Keyboard Navigation Shortcuts设置为null。
右 Right:// default right
cm.setShortcutKey(
null,
GC.Spread.Commands.Key.right,
true,
false,
false,
false
);
左 Left:
// default left
cm.setShortcutKey(
null,
GC.Spread.Commands.Key.left,
true,
false,
false,
false
);
上 Up:
// default up
cm.setShortcutKey(
null,
GC.Spread.Commands.Key.up,
true,
false,
false,
false
);
下 Down:
// default down
cm.setShortcutKey(
null,
GC.Spread.Commands.Key.down,
true,
false,
false,
false
);设置自定义命令快捷键
现在，我们将为每个箭头和CTRL键盘按下组合使用新的自定义命令名称设置键盘快捷键。下面，我们分解了箭头键键盘组合的自定义命令：right，left，up，down。
右 Right:// custom right
cm.setShortcutKey(
"ctrlRight",
GC.Spread.Commands.Key.right,
true,
false,
false,
false
);
左 Left:
// custom left
cm.setShortcutKey(
"ctrlLeft",
GC.Spread.Commands.Key.left,
true,
false,
false,
false
);
上 Up:
// custom up
cm.setShortcutKey(
"ctrlUp",
GC.Spread.Commands.Key.up,
true,
false,
false,
false
);
下 Down:
// 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);
页:
[1]