反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

JS实现键盘翻页效果

  • 文档创建者:cherishdqy
  • 历史版本:9
  • 最近更新:RosieY 于 2022-08-30
  • 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") {
    //跳转到下一页
    contentPane.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 键(↓)即可跳转到下一页。

    注:不支持移动端。

    附件列表


    主题: 二次开发
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526