找回密码
 立即注册

QQ登录

只需一步,快速开始

Wilson.Zhang

超级版主

30

主题

1579

帖子

2157

积分

超级版主

Rank: 8Rank: 8

积分
2157
Wilson.Zhang
超级版主   /  发表于:2024-9-30 18:11  /   查看:963  /  回复:0
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,阻止其默认行为即可。

image.png745913696.png

图1. 浏览器ctrl+f触发查找窗口

取消了浏览器ctrl+f的默认功能后,浏览器即可响应自定义ctrl+f快捷键弹出查找对话框。然而,连续使用ctrl+f将弹出多个查找对话框,如图2所示。针对这个现象,在每次自定义命令执行时,先根据DOM元素样式id或class检查查找对话框是否已存在,如果存在就使用现成的对话框,否则调用find命令弹出查找对话框。

image.png641378783.png

图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

自定义ctrl+f调用查找对话框.html

5.61 KB, 下载次数: 0

0 个回复

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