找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

141

主题

260

帖子

1675

积分

超级版主

Rank: 8Rank: 8

积分
1675
Winny
超级版主   /  发表于:2021-9-27 11:44  /   查看:3442  /  回复: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文件,项目工程目录如下:
image.png174989928.png
我们需要修改的文件主要集中于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方法,这里贴出了该快捷键注册的代码:
image.png175563964.png
不清楚register方法具体含义可以参考SpreadJS API: Register API
根据自己的实际需求,去修改register()方法后5个参数即可,这里需要注意的是,不同的操作系统及浏览器,按键对应的keyCode可能并不相同,需要针对不同的场景进行处理。

(2)如果要新增一个快捷键怎么办?
新增快捷键可以参照项目中注册其它快捷键的编写方式,这里如果有前端研发背景应该没什么大的问题,注意如果是自己新增了ts文件来编写代码,需要将文件引入entry.js中做统一的导出。


快捷键增强测试.zip

97.9 KB, 下载次数: 254

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部