JS實現工具欄新增計數

1.1 版本

1.2 預期效果

報表查看程式中，需要有計算當前列數的功能並可以在工具欄上顯示當前條數，可透過新增一個自訂按鈕來實現該功能。

如下圖所示：

1.3 實現思路

透過儲存格公式獲取當前頁的資料條數和報表總資料條數，並隱藏儲存格所在列，利用工具欄的“載入結束”事件，獲取資料條數和報表總數，顯示在工具欄自訂的按鈕正文中。

2.1 準備範本

點選可下載範本：LineForm .cpt

開啟範本，範本樣式如下圖所示：

2.2 設計報表

1）編輯 ds1 資料集，將 SQL 修改為：SELECT * FROM 產品  order by 產品ID，如下圖所示：

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

3）刪掉 A 欄，並調整報表頁面寬度，如下圖：

4）選中  A3 儲存格，在右側屬性面板選中條件屬性，新增一個條件屬性，屬性選擇分頁：列後分頁，類型選中公式，輸入公式：&A3 % 10 = 0，設定每 10 列顯示為一頁。如下圖所示：

5）在 A1 儲存格插入公式：COUNT({A3})，計算當前頁資料列數；在 B1 儲存格插入公式：COUNT(A3)，計算報表資料總列數。如下圖所示：

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

6）右擊第 1、2 列，設定重複標題列。如下圖所示：

7）右擊第 1 列，點選隱藏。如下圖所示：

2.3 自訂按鈕

選擇「範本>範本 Web 屬性>分頁預覽設定」，新增一個自訂按鈕。如下圖所示：

2.4 新增事件

選擇「範本>範本 Web 屬性>分頁預覽設定」，選擇「為該範本單獨設定」，新增一個「載入結束」事件。如下圖所示：

JavaScript 程式碼如下

var curnum = _g().getCellValue("A1");
var rownum = _g().getCellValue("B1");
$('#fr-btn-CustomToolBarButton').text("當前頁" + curnum + "筆資料，共" + rownum + "筆資料");

2.5 效果預覽

儲存範本，「分頁預覽」效果如下圖所示：

注1：不支援行動端

注2：不支援「填報預覽」

3.1 填報預覽的 JS 程式碼

如使用填報分頁，需要在「填報預覽設定」中新增自訂按鈕，並新增載入結束事件：

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 + "筆資料");

如果使用了凍結設定，JavaScript 程式碼如下

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

如果使用了凍結設定，並使用了填報分頁，需要在「填報預覽設定」中新增自訂按鈕，並新增載入結束事件：

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']").find("div").html(); //獲取當前sheetB1儲存格的值
$('#fr-btn-CustomToolBarButton').text("當前頁" + curnum + "筆資料，共" + rownum + "筆資料");

3.2 效果預覽

「填報預覽」需在 URL 後面加上&__cutpage__=v。如下圖所示：

點選下載範本：01-JS實現工具欄新增計數.cpt