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 設置重複标題行
2.1.4 隐藏行列
右擊第一行，隐藏第一行單元格，如下圖所示：
選擇隐藏即可。
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 預覽效果
啓動設計器，在浏覽器中輸入網址：http://localhost:8075/webroot/help/page_demo/totalnumber.html，效果如下圖所示：
