JS实现工具栏添加计数- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 預期效果

報表查看過程中，需要有計算當前行數的功能并可以在工具欄上顯示當前條數，可通過添加一個自定義按鈕來實現該功能。

如下圖所示：

222

1.2 實現思路

通過單元格公式獲取當前頁的數據條數和報表總數據條數，并隐藏單元格所在行，利用工具欄的“加載結束”事件，獲取數據條數和報表總數，顯示在工具欄自定義的按鈕文本中。

2. 實例

2.1 準備模板

準備内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt

點擊可下載模板：LineForm.cpt

打開模板，模板樣式如下圖所示：

2.2 設計報表

1）編輯 ds1 數據集，将 SQL 修改爲：SELECT * FROM 産品 order by 産品ID，如下圖所示：
222

2）選中所有單元格，右鍵選中的單元格，清除控件。如下圖所示：

3）删掉 A 列，并調整報表頁面寬度，如下圖：

222

4）選中 A3 單元格，在右側屬性面板選中條件屬性，添加一個條件屬性，屬性選擇分頁：行後分頁，類型選中公式，輸入公式：&A3 % 10 = 0，設置每10行顯示爲一頁。如下圖所示：

5）在 A1 單元格插入公式：COUNT({A3})，計算當前頁數據行數；在 B1 單元格插入公式：COUNT(A3)，計算報表數據總行數。如下圖所示：

注：A1、B1 單元格的兩個公式不一樣，A1 單元格多了一對中括号，{A3}的含義是獲取當前頁的 A3 單元格的值。

6）右擊第 1、2 行，設置重複标題行。如下圖所示：

222

7）右擊第 1 行，點擊隐藏。如下圖所示：

222

2.3 自定義按鈕

選擇模板>模板 Web 屬性>分頁預覽設置，添加一個自定義按鈕。如下圖所示：

2.4 添加事件

選擇模板>模板 Web 屬性>分頁預覽設置，選擇「爲該模板單獨設置」，添加一個「加載結束」事件。如下圖所示：

JavaScript 代碼如下

var curnum = $("td[id^='A1']").html(); //獲取A1單元格的值，即當前頁數據條數
var rownum = $("td[id^='B1']").html(); //獲取B1單元格的值，即報表總數據條數
$('#fr-btn-CustomToolBarButton').text("當前頁" + curnum + "條數據，共" + rownum + "條數據");

如使用填報分頁，需要在「填報預覽設置」中添加自定義按鈕，并添加加載結束事件：

JavaScript 代碼如下：

var curnum = $(".sheet-container").eq($(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"))).find("td[id^='A']").length - 2; //獲取當前sheetA列單元格個數，并減去前兩行，即A3單元格擴展後的個數
var rownum = $(".sheet-container").eq($(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"))).find("td[id^='B1']").html(); //獲取當前sheetB1單元格的值
$('#fr-btn-CustomToolBarButton').text("當前頁" + curnum + "條數據，共" + rownum + "條數據");