1.概述
1.1 问题描述
当我们报表有多页时,在展示时想使用键盘的上下键、左右键或空格键实现对报表的操作,如上下键实现翻页,该如何实现呢?
1.2 实现思路
通过 JS 获取按下按键的键值,根据键值对报表进行判断翻页操作。
2. 示例
1)准备一个预览时多页呈现的模板。
2)点击菜单模板>模板 Web 属性>分页预览设置,选择 为该模板单独设置,添加一个加载结束事件,如下图所示:
JavaScript 代码如下:
//获取键盘按键按下事件
$(document).bind('keydown', function(e) {
//获取按键键值
var key = window.event ? e.keyCode : e.which;
//alert(key);
if (key.toString() == "33"|| key.toString() == "37" || key.toString() == "38") {
//跳转到上一页
contentPane.gotoPreviousPage();
}
else if (key.toString() == "32" || key.toString() == "34"|| key.toString() == "39" || key.toString() == "40") {
//跳转到下一页
_g().gotoNextPage();
}
})
键盘按键对照表如下:
对应按键 | 按键十进制值 |
---|---|
空格键(Space键) | 32 |
Page Up键(PgUp键) | 33 |
Page Down键(PgDn键) | 34 |
LEFT ARROW键(←) | 37 |
UP ARROW键(↑) | 38 |
RIGHT ARROW键(→) | 39 |
DOWN ARROW键(↓) | 40 |
3)保存模板,点击分页预览,当按键为 Page Up键(PgUp键)、LEFT ARROW键(←)、 UP ARROW 键(↑),即可跳转到上一页,
当按键为空格键(Space 键)、Page Down键(PgDn键)、RIGHT ARROW键(→)、DOWN ARROW 键(↓)即可跳转到下一页。
注:不支持移动端。