1. 概述
1.1 问题描述
在自定义工具栏中，可以显示总页数，那么有什么方法能实现在工具栏中显示数据的总条数呢，如下图所示
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)，如下图所示：
2.1.3 设置重复标题行
鼠标右击左边的行序号 1，便可以选中该行。在选中的行序号上单击鼠标右键，选择「设置重复标题行」，如下图所示：
2.1.4 隐藏行列
A1 单元格只是作为计数使用，不需要展示在页面上，所以需要隐藏。可以直接选中第 1 行的行序号，单击鼠标右键选择隐藏，如下图所示：
2.1.5 加载结束事件设置
点击菜单「模板>模板Web属性>分页预览设置」，添加「加载结束事件」，添加 JavaScript 代码，如下图所示：
JavaScript 代码如下：
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 新建HTML文件
1）新建totalnumber.html，内容如下：
点击下载并解压获得文件：totalnumber.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">
<input type = "text" id = "e" style="width:80px">
<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="/webroot/decision/view/report?viewlet=/doc/Primary/DetailReport/Details_7.cpt&__showtoolbar__=false" width =100% height =80%></iframe>
</body>
</html>
2）将totalnumber.html放置到 %FR_HOME%\webapps\webroot\help\page_demo 路径下。如下图所示：
2.3 预览效果
启动工程，在浏览器中输入网址：http://localhost:8075/webroot/help/page_demo/totalnumber.html，效果如下图所示：
上一篇：自定义缩放按钮
