自定义设计器中的快捷键
本帖最后由 AlexZ 于 2024-10-9 14:05 编辑SpreadJS Designer允许通过快捷键触发功能，但是，由于版本差异，在较高版本中可用的快捷键在较低版本中无法使用。比如，在最新的17.1.6版本，通过ctrl+f即可触发查找功能弹出查找对话框，而在14版本并不支持。因为，较低版本时期并未将相关快捷键与功能绑定。那么，针对上述场景，如何在较低版本复刻较高版本的快捷键功能呢？
熟悉SpreadJS Designer的朋友们都了解Designer UI将功能按钮与Command绑定，点击功能时，触发对应的Command。那么，如果知道触发查找弹窗的Command，便可以通过CommandManager:setShortcutKey()为Command指定快捷键。
弹出查找对话框的命令名称为find，即GC.Spread.Sheets.Designer.CommandNames.FindDialogFind。找到了源头，接下来需要做的是：
1. 自定义命令，令其执行时调用find命令。
2. 将自定义命令与快捷键ctrl+f绑定。
由于SpreadJS Designer在浏览器中运行，ctrl+f在浏览器中默认触发浏览器内置的查找功能，如图1所示。为了让ctrl+f能只触发自定义命令，有必要阻止浏览器原本对ctrl+f快捷键的响应。令window监听keydown事件，如果按键是ctrl+f/F，阻止其默认行为即可。
图1. 浏览器ctrl+f触发查找窗口
取消了浏览器ctrl+f的默认功能后，浏览器即可响应自定义ctrl+f快捷键弹出查找对话框。然而，连续使用ctrl+f将弹出多个查找对话框，如图2所示。针对这个现象，在每次自定义命令执行时，先根据DOM元素样式id或class检查查找对话框是否已存在，如果存在就使用现成的对话框，否则调用find命令弹出查找对话框。
图2. 多个查找对话框
附上demo，以供参考。当然也支持将自定义命令绑定至其他快捷键，参考官网API文档了解绑定方式：https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Commands.CommandManager#setshortcutkey
问题原帖：https://gcdn.grapecity.com.cn/showtopic-227194-1-3.html
页:
[1]