反馈已提交

网络繁忙

自定义翻页按钮

  • 文档创建者:文档助手1
  • 历史版本:24
  • 最近更新:Carly 于 2023-08-30
  • 1. 概述

    1.1 问题描述

    用户将网页中的一部分嵌入了一张报表模板,有时希望能够自己定义翻页按钮,不使用报表已有的按钮,如下图所示:

    1600935266984804.png

    1.2 实现思路

    由 自定义按钮 章节可知,如上图中的首页、上一页、下一页、末页按钮,直接调用 FR 内置方法即可

    • 首页按钮调用方法:gotoFirstPage()

    • 上一页按钮调用方法:gotoPreviousPage()

    • 下一页按钮调用方法:gotoNextPage()

    • 末页按钮按钮调用方法:gotoLastPage()

    获取当前所在页与总页数对应方法「contentPane.currentPageIndex及 「contentPane.reportTotalPage」

    2. 操作步骤

    2.1 新建 HTML 文件

    1)新建goPage.html,内容如下:

    点击下载文件:goPage.zip

    <html>     
      <head>     
      <title>自定义翻页按钮</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
      <script type="text/javascript">     
        function afterload() {     //iframe 加载后触发
          var contentPane = document.getElementById("reportFrame").contentWindow._g();  //获取报表 contentPane   
          var cPageIndex = contentPane.currentPageIndex;   //当前所在页
          var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";   //报表首次加载结束后显示的页码信息
        document.getElementById("page").value = pv;     //将页码信息赋给 page 文本
          contentPane.on("afterload", function() {      //报表加载结束监听事件
            cPageIndex = contentPane.currentPageIndex;      //每次加载完后重新获取当前页码
            pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";     //重新生成页码信息 
            document.getElementById("page").value = pv;      //重新给 page 文本赋页码信息   
          });      
        }     
      function gotoPage() {     
        var contentpane= document.getElementById('reportFrame').contentWindow._g();     
        var page = document.getElementById("index").value;     
        if(page >= contentpane.reportTotalPage) {     
          contentpane.gotoLastPage();     
        }      
        contentpane.gotoPage(parseInt(page));     
      }     
    </script>     
    </head>   
    <body>     
      <div id="toolbar">     
        <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoFirstPage()">首页</button>     
        <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoPreviousPage()">上一页</button>      
        <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoNextPage()">下一页</button>       
        <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoLastPage()">末页</button>
        <input id="page" type="text" readonly="true" size="12" style="border:none">     
        到<input id ="index" type ="text" size="3"/>页 <a onclick="gotoPage()" href="javascript:void(0)">跳转</a>
      </div>     
      <iframe id="reportFrame" onload="afterload()" src="../../decision/view/report?viewlet=/doc/Primary/DetailReport/Details.cpt&__showtoolbar__=false" width =100% height =80%></iframe>     
    </body>     
    </html> 

    2)goPage.html放置到 %FR_HOME%\webapps\webroot\help\page_demo 路径下。

    2.2 效果预览

    启动工程,在浏览器输入:http://localhost:8075/webroot/help/page_demo/goPage.html ,效果如下图所示:

    222





    附件列表


    主题: 部署集成
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持