Gantt 图表及其元素可以通过按键或组合键进行访问。本文介绍了 Gantt 的键盘导航基础,包括焦点行为、内置快捷键的使用以及如何自定义快捷键。
要在 Gantt 图表中启用键盘导航,请通过 gantt.plugins 方法激活 keyboard_navigation 插件。
gantt.plugins({
keyboard_navigation: true
});
关于 gantt.ext.keyboardNavigation API 的详细信息,请参见文章 键盘导航扩展。
键盘导航有两种类型:
通过将 keyboard_navigation 属性设置为 true 来启用。
通过将 keyboard_navigation_cells 属性设置为 true 来启用。
按下 Tab 键会像其他标准元素一样将焦点设置到 Gantt 上。获得焦点后,可以使用方向键等在 Gantt 内进行导航。
再次按下 Tab 键,焦点会离开 Gantt,跳转到页面的其他部分。
当模态窗口(如 lightbox 或确认窗口)打开时,焦点会从 Gantt 转移到模态窗口,并在其中进行表单式导航。关闭窗口后,焦点返回 Gantt。
要将焦点带回 Gantt,请使用 focus 方法。当 Gantt 重新获得焦点时,会将其放在内部的活动元素、第一行或最近选中的元素上。
模态窗口中的默认导航操作包括:
如果焦点位于表单按钮上,按 Space 或 Enter 会激活该按钮,而不是触发模态窗口的默认操作。
如果焦点设置在网格单元格或行上,然后点击了 Gantt 内的自定义 HTML 元素,焦点会返回到该单元格或行。
从 v7.1.13 开始,在自定义元素上添加 'no_keyboard_navigation' 类,可以防止焦点返回到网格单元格或行。
按键触发的操作取决于上下文(作用域)。可以为 Gantt 图表中的不同元素(作用域)分配不同的快捷键:
如果同一个快捷键被分配给多个作用域,则更具体的作用域优先生效。例如,若快捷键同时分配给 Gantt 和某个元素,则会触发元素的快捷键。
要添加新的键盘快捷键,请使用 addShortcut 方法,传入三个参数:
gantt.addShortcut("shift+w", function(e){
var task = gantt.locate(e);
if(task)
gantt.showQuickInfo(task)
},"taskRow");
要从某个作用域移除快捷键,请使用 removeShortcut 方法,传入两个参数:
gantt.removeShortcut("shift+w","taskRow");
可以通过 getShortcutHandler 方法获取某个快捷键的处理函数,参数包括:
var shortcut_handler = gantt.getShortcutHandler("shift+w","taskRow");
该方法返回处理该快捷键的函数。
快捷键可以包括:
多个快捷键组合可以用逗号分隔,比如 "ctrl+a, ctrl+space"。
Gantt 图表内置了多种快捷键,便于导航:
Related sample: Keyboard Navigation
有关如何通过 Ctrl+C/Ctrl+V 快捷键实现任务的复制/粘贴,可参见 相关 文章中的示例。
Related sample: Keyboard Navigation - navigate cells
自 4.2 版本起,Gantt 图表支持通过以下方式进行水平时间轴滚动:
-> Shift 键 + 鼠标滚轮移动。
从 6.3 版本起,可以通过 horizontal_scroll_key 属性将修饰键从默认的 Shift 改为 Alt 或 Meta:
gantt.config.horizontal_scroll_key = "altKey";
要禁用鼠标滚轮的水平滚动,可将该属性设置为 false:
gantt.config.horizontal_scroll_key = false;
Back to top