历史版本18 :工具栏显示数据总量 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 问题描述

在自定义工具栏中,可以显示总页数,那么有什么方法能实现在工具栏中显示数据的总条数呢,如下图所示

image.png

1.2 实现思路

通过在某个单元格中使用 count 函数计算总的数据条数,然后在分页预览的加载结束事件中获取对应单元格的值并赋值给主页面中的文本框或其他控件中。

注:使用 count 函数的单元格必须在扩展数据的上方单元格。

但是这样存在一个问题,当点击下一页时,单元格中显示的是下一页数据中对应单元格的数据而不是总条数。解决方法是通过使用重复标题行,让 count 函数所在的单元格固定在一个位置,如放至第一行。

2. 操作步骤编辑

2.1 模板设置

2.1.1 打开模板

打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\Details_5.cpt

2.1.2 修改模板

在第一行数据前,插入一行数据,然后在 A1 单元格填写=count(A3),如下图所示:
image.png

2.1.3 设置重复标题行

image.png2.1.4 隐藏行列

右击第一行,隐藏第一行单元格,如下图所示:
image.png

选择隐藏即可。

2.1.5 加载结束事件设置

给此模板增加加载结束事件,具体的 JS 代码如下:


var totalnumber=$("tr[tridx=0]","div.content-container").children().eq(0).text();//获取A1单元格的值  
parent.document.getElementById("e").value="共"+totalnumber+"条数据";//给页面上id为e的文本框赋值

2.1.6 保存模板

保存模板,具体的模板设置可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\Details_7.cpt

2.2 主页面设置

2.2.1 打开html页面

打开%FR_HOME%\webapps\webroot\help\page_demo\custoolbar.html

2.2.2 增加一个文本框

在 body 标签中的 div 标签中增加一个文本框控件,控件的 id 为 e,定义如下:

<input type = "text" id = "e" style="width:80px">

2.2.3 更换 iframe 的 src

将 iframe 的 src 更换为刚刚保存的模板即为:

<iframe id="reportFrame" onload="afterload()" src="/webroot/decision/view/report?viewlet=/doc/Primary/DetailReport/Details_7.cpt&__showtoolbar__=false" width =100% height =80%></iframe>

2.2.4 完整代码

完整代码如下:


<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.contentPane;  //获取报表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.contentPane;     
    var page = document.getElementById("index").value;     
    if(page >= contentpane.reportTotalPage) {     
      contentpane.gotoLastPage();     
    }      
    contentpane.gotoPage(parseInt(page));        
  }     
</script>     
</head>     
<body>     
  <div id="toolbar">     
    <input type = "text" id = "e" style="width:80px"> 
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">首页</button>     
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">上一页</button>      
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">下一页</button>       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.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="/webroot/decision/view/report?viewlet=/doc/Primary/DetailReport/Details_7.cpt&__showtoolbar__=false" width =100% height =80%></iframe>     
</body>     
</html> 

2.3 预览效果

完整代码可参考:%FR_HOME%\webapps\webroot\help\page_demo\totalnumber.html

启动设计器,在浏览器中输入网址:http://localhost:8075/webroot/help/page_demo/totalnumber.html,效果如下图所示:

222