當前為10.0版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

JS獲取分頁預覽單元格

1. 概述

1.1 預期效果

有時我們也需要獲取分頁預覽的報表中的某些單元格的值進行其他操作,比如報表總行數保存在某固定單元格中,在工具欄中顯示報表總行數。

下面效果圖中,我們獲取了某單元格的值,然後對其進行了修改,如下所示:

2021-01-25_16-21-27.gif

1.2 實現思路

通過添加「加載結束」事件,利用 JS 代碼獲取到單元格中的值。

2. 示例

2.1 準備模板

準備内置模板:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\卡片分欄.cpt

點擊可下載模板:卡片分欄.cpt

打開模板,模板樣式如下圖所示:

image.png

2.2 添加事件

打開模板,點擊「模板>模板 Web 屬性>分頁預覽設置」,選擇「爲該模板單獨設置」,添加一個「加載結束」事件。

如下圖所示:

image.png

JavaScript 代碼如下:

方法一

注:此處的行列皆爲預覽擴展出來後的行列值,行列号是從 0 開始計算的。

var a = $("tr[tridx=2]","div.content-container").children().eq(1).html();
alert("第3行第2列值爲:"+a);
$("tr[tridx=2]","div.content-container").children().eq(1).html(1001);
alert("第3行第2列值被修改爲1001");

B/S 訪問某個 cpt 模板,報表 Servlet 将會将 cpt 文件解析成對應的 HTML,報表内容最終轉換爲一個 table,位於 id=content-container 的 div 中。

由於分頁預覽只是展現,在這種查看方式下FR沒有現成單元格獲取方法,可以用 jQuery 語法獲取指定單元格。

$("tr[tridx=行号]","div.content-container").children().eq(列号)       

方法二

注:單元格号與模板設計時的單元格号類似,如 A1、D5 等,A1 對應第 1 行第 1 列,第 5 行第 4 列對應 D5。

var a=$("td[id^=B3-]").text();
alert("B3單元格值爲:"+a);//B3 是指預覽後所擴展出來的單元格
$("td[id^=B3-]").text(1001);
alert("第B3單元格的值被修改爲1001");

頁面加載結束後的主報表體是一個table對象,每個單元格對應對應 td 對象,裏面包含控制該單元格所在位置的id 屬性,格式如A1-0-102其中A1即表格單元格代碼,只需要用 jQuery 對象屬性前匹配符号 ^= 獲取單元格 td 對象,即可獲取指定的單元格,同時利用 jQuery 提供的 $("td[id^=單元格号-]") 和 text()方法來獲取和設置單元格的值,即可達到目的。

2.3 效果預覽

保存模板,點擊「分頁預覽」,效果如下圖所示:

2021-01-25_16-21-27.gif

注:不支持移動端。

3. 下載模板

已完成模板可參考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實例\JS獲取分頁預覽下單元格點的值.cpt

點擊下載模板:JS獲取分頁預覽下單元格的值.cpt

附件列表


主題: 原簡體文檔
  • 有幫助
  • 沒幫助
  • 只是瀏覽

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

9s后關閉

反饋已提交

網絡繁忙