資料分析軟體FineReport教程：[6]分頁預覽JS?

下面就通過資料分析軟體FineReport來簡單介紹一下。

工具/原料

資料分析軟體FineReport7.1.1

大小：148.2M 適用平臺：windows/linux

獲得分頁預覽單元格

概述

分頁預覽報表只能用於展現資料，有時我們也需要獲取分頁預覽的報表中的某些單元格的值進行其他操作，比如在工具欄中顯示報表總行數(總行數儲存在某固定單元格中)。

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

原理

BS訪問某個cpt模板，報表servlet將會將cpt檔案解析成對應的html，報表內容最終轉換為一個table，位於id=content-container的div中。

由於分頁預覽只是展現，在這種檢視方式下FR沒有現成單元格獲取方法，可以用jquery語法獲取指定單元格，如：

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

例如我們要獲取某行某列的值，程式碼是：

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

如果我們要修改某行某列的值，程式碼是：

$("tr[tridx=行號]","div.content-container").children().eq(列號).html(新值);

示例

例如對於以上的分頁報表，我們可以設定一個載入後事件。

單擊分頁預覽旁的設定圖示，新增載入結束事件，具體的js如下：

var a = $("tr[tridx=4]","div.content-container").children().eq(3).html();

alert("第5行第4列值為："+a);

$("tr[tridx=4]","div.content-container").children().eq(3).html(900);

alert("第5行第4列值被修改為900");

分頁預覽改變滑鼠所在行的顏色

問題描述

在預覽模板時，由於資料比較多，希望滑鼠點選某行時該行高亮顯示，如下圖所示，此時要如何實現呢？

實現步驟

開啟一模板如：%FR_HOME%\WebReport\WEB-INF\reportlets\GettingStarted.cpt模板，點選模板>模板web屬性>分頁預覽設定，選擇為該模板單獨設定，然後新增載入結束事件，具體js如下：

contentPane.makeHighlight('red'); //使點選的行變成紅色

分頁預覽模板，當滑鼠點選某行時，某行變色。

如果要實現滑鼠滑過改行是改變顏色，js語句修改為

contentPane.makeHighlight('red','mouseover');

定時重新整理報表

問題描述

對於監控系統，資料庫中的資料是實時更新的，希望BS端的報表也能夠實時更新資料，如實時監控股價走勢。要如何設定才能實現報表的定時重新整理呢？

實現思路

點選模板>模板web屬性，選擇為當前模板設定，然後新增載入結束事件，使用setInterval方法定時重新整理報表頁面，JS如下：

setInterval("self.location.reload();",10000); //10000ms即每10s重新整理一次頁面。

禁用右鍵

問題描述

在jsp頁面中呼叫模板，一般是將url放在iframe中，然後通過點選相應的樹節點檢視報表，若設定許可權後，登入系統後可能有些使用者通過點選右鍵中的屬性檢視url然後訪問，這樣對系統不是很安全，因此禁止使用者通過右鍵檢視url呢，此時可以使用禁用選單右鍵功能。

實現步驟

點選模板>模板web屬性>分頁預覽設定，選擇為該模板單獨設定，在下面的事件設定裡面新增一個載入結束事件，完整js程式碼如下：

function nocontextmenu(event){

event = event window.event;

if (event.which == 2 )

event.returnValue = false;

return false;

}

document.oncontextmenu = nocontextmenu;

這段程式碼的基本原理是當用戶的頁面事件為右鍵(event.which == 2)的時候返回false，禁止彈出選單。

如果模板中有引數面板，希望一呼叫模板就禁用右鍵，而不是查詢之後禁用，則需要在引數面板的查詢按鈕中新增初始化事件，寫入上述js程式碼。

注：如果要禁用填報頁面和資料分析頁面的右鍵操作，則在模板>模板web屬性的填報預覽設定和資料分析設定中進行相同的設定。

在報表中呼叫客戶的js

問題描述

兩種情況：

1、報表嵌入在某個頁面的iframe框架中，需要在報表模板中獲取頁面裡面定義的方法；

2、報表嵌入在某個頁面的iframe框架中，需要在報表模板中獲取頁面中另一個iframe裡面的方法。

解決方案

首先通過js獲取方法所在的物件，然後通過方法名呼叫：

情況1中頁面對於模板來說是父，因此可以通過parent.window.fnname()呼叫父頁面的方法；

情況2中通過父頁面獲取另一個iframe，再呼叫其中的方法：parent.window.getElementById("iframename").contentWindow.fnname()。

前提準備

如下page1.html中，通過iframe嵌入了一張report報表及page2.html頁面；在page1中定義了方法fun1：

這是page1

其中page2.html中也定義了一個方法fun2：

這是page2！

在模板中呼叫客戶自己的js方法

如在report.cpt模板的引數介面提交按鈕點選事件中，獲取頁面page1及page2中的方法，js如下：

var page1 = parent.window;

page1.fun1();

var page2 = page1.document.getElementById("page2").contentWindow;

page2.fun2();