SpreadJSV14.2.0新特性解析 - 快捷键增强
本帖最后由 Winny 于 2022-8-25 16:44 编辑经常使用Excel的同学应该了解，Excel中有大量的快捷键，能帮助用户更加便捷的操作文件。
但SpreadJS受限于浏览器，如果直接内置快捷键，可能会和浏览器自身的快捷键冲突，而用户的需求又是众口难调，有的用户想要与Excel一致的快捷键，但有的用户又想要浏览器默认快捷键的功能。
在V14.2.0之前，用户可以采用自定义快捷键的方式来注册自己想用的快捷键，但这种方式比较繁琐。
V14.2.0针对这项需求，结合不同用户的使用场景，重新设计了该功能实现的形式，具体实现步骤如下：
1. 在gitHub上下载生成快捷键增强js的工程；
下载地址：https://github.com/GrapeCity/spr ... xtension.14.2.0.zip
下载完成之后，将项目在自己的IDE中打开，根据readme的步骤完成项目的启动及编译。为方便用户使用，这里重复一下该git项目的使用步骤：（1）更新项目package.json中SpreadJS相关的产品包到当前最新版；
（2）打开控制台，进入项目目录下，执行npm install;
（3）执行npm run build，执行成功后，可以看到项目根路径下多出一个dist目录，目录下包含一个spreadjs_shortcut_command.js的文件，该文件就是我们生成的目标文件。
2. 将生成的目标文件引入到自己的项目中，就可以使用本次版本新增的快捷键了，文章最后会有本次测试项目的工程包，可以点击下载。
引入完成后就可以测试快捷键了，需要注意的是，由于浏览器策略问题，许多快捷键的抢占权我们其实拿不到，因此我们只实现了部分快捷键功能，这里对已经实现的快捷键做简单的解释说明：
Shift+Space： 用于选择整行，用户可以选中一个或多个选区，之后同时按下Shift和Space，该操作不支持撤销。
Ctrl+Space： 选择整列，用户可以选择一个或多个区域，之后同时按下Ctrl和Space，该操作会受系统类型影响，中文环境下，该快捷键会是切换输入法，建议大家改写该快捷键，如何改写在之后会讲到，该操作不支持撤销。
Ctrl+'-'： 删除一行或一列，用户需要选中某行或某列，该操作支持撤销。
Ctrl+End：跳转到当前sheet有内容的右下方单元格，内容不限于值，样式，该操作不支持撤销。
Ctrl+Home：跳转到当前sheet页A1单元格，不支持撤销。
Ctrl+9：隐藏选中行，支持撤销。
Ctrl+'['： 选择当前单元格引用的单元格。
Ctrl+']'： 选择当前单元格影响的单元格。
Ctrl+';'：给当前活动单元格设置日期，支持撤销。
Alt+'=': 给当前单元格添加sum函数，支持撤销。
Alt+Shift+Right Arrow：选中整行或整列，按下Alt+Shift+Right Arrow，会将选中行或列进行分组，如果选中的不是整行或整列，该操作将无效，支持撤销。
Alt+Shift+Left Arrow：选中已经分组的整行或整列，撤销分组，支持撤销。
Alt+';'：只选择可见单元格；
Ctrl+D：将选中区域第一行复制到区域下方单元格中，支持撤销。
Ctrl+R： 将选中区域第一列复制到区域右侧单元格中，支持撤销。
Ctrl+Shift+'+'： 插入行或列，选中整行或整列后，同时按下Ctrl、Shift和+，支持撤销；
Ctrl+A： 全选整个sheet，不支持撤销。
Ctrl+B： 当前选中单元格字体变粗，支持撤销。
Ctrl+I： 当前选中单元格字体变为斜体，支持撤销。
Ctrl+U：当前选中单元格添加下划线，支持撤销。
Ctrl+Shift+'%'： 当前选中单元格值变为百分比形式，支持撤销。
以上是V14.2.0下支持的快捷键，其余未提及的暂不支持。
做到了这里，很多客户还是会提出疑问，如果我的项目中，想要替换当前实现的快捷键，或者要新增一些快捷键，要如何操作呢？
这些需求都是要用户对git上download下的工程做一些定制化的开发，之后继续build生成js文件引入到项目中即可，接下来，我们主要讲解一下需要对git上下载的内容哪部分进行修改。
1. 已经实现的快捷键想要更改怎么办？
以Alt+'='添加SUM函数为例，首先需要根据Git上下载下来的工程找到该功能所在的js文件，项目工程目录如下：
我们需要修改的文件主要集中于src目录下的shortcut文件中，对shortcut文件夹下的文件做简单说明：
action.calc.ts： 计算函数相关的快捷键；
action.cell.ts： 单元格操作相关的快捷键；
action.row.column.ts： 行列操作相关的快捷键；
action.selection.ts： 区域操作相关的快捷键；
action.style.ts： 样式操作相关的快捷键；
显而易见，添加SUM函数应该属于函数相关的模块，因此我们应该在action.calc.ts中查找，研发人员快捷键的名字也是起的比较见名知意，添加SUM函数命令的名称为‘insertSumFunction’。而注册快捷键的代码主要就是register方法，这里贴出了该快捷键注册的代码：
不清楚register方法具体含义可以参考SpreadJS API: Register API。
根据自己的实际需求，去修改register()方法后5个参数即可，这里需要注意的是，不同的操作系统及浏览器，按键对应的keyCode可能并不相同，需要针对不同的场景进行处理。
（2）如果要新增一个快捷键怎么办？
新增快捷键可以参照项目中注册其它快捷键的编写方式，这里如果有前端研发背景应该没什么大的问题，注意如果是自己新增了ts文件来编写代码，需要将文件引入entry.js中做统一的导出。
页:
[1]