報表實時顯示時間效果

報表,除了相對靜態地展現彙總統計數據以及分佈、趨勢等數據內容外,也可以用於顯示和時間相關的即時信息,包括實時顯示時間。例如,下面這個設備監控應用統系中,首頁除了顯示實時監控數據外,還需要在右上角顯示實時時間:

報表實時顯示時間效果

這種形式的“動態報表”其實在我們生活中也隨處可見,最常見的就是火車站大屏幕上的列車時刻表,上面顯示的當前時間,讓旅客能夠一目瞭然地知道自己的列車還有多長時間開,等待的列車什麼時候到。

報表實時顯示時間效果

其實,要在報表中做到上面的效果很簡單,基本思路就是讓頁面定時(比如每隔一秒鐘)調用 JS 方法,在 JS 中通過單元格的 ID 獲取到顯示時間的那個格子,將當前時間作爲這個格子的新值顯示就可以了。

下面,我們就具體看看如何通過潤乾報表實現這樣司空見慣的動態顯示時間效果。

1、設置報表單元格表達式
前面第一個圖是在潤乾報表設計器自帶的報表“設備故障分析.rpx”的基礎上實現的,接下來我們就用這個報表作爲例子進行說明。我們首先在自帶報表中添加時間,合併 N4、O4 單元格,並在該合併格中設置單元格表達式 =string(now(),”yyyy 年 MM 月 dd 日 hh:MM:ss”)。

報表實時顯示時間效果

2、設置 JSP 頁面標籤
然後,我們打開報表展現頁面 showReport.jsp,在這個頁面中設置標籤屬性 generateCellId,以便報表單元格在頁面生成格子的 ID。

打開原始的報表展現頁面,我們發現設置當前時間的單元格,並沒有生成對應的 ID,如下圖所示:

報表實時顯示時間效果

爲了在 JS 腳本中能夠通過 ID 可以獲得到該單元格,以便修改該單元格的值,我們需要在展現的頁面中添加標籤屬性 generateCellId=”yes”,如下圖所示:

報表實時顯示時間效果

設置了該屬性後,我們可以在頁面中可以看到,該單元格生成了對應的 id 值:

報表實時顯示時間效果

3、設置頁面 JS 方法
接下來,我們在在報表展現的頁面中添加動態改變單元格值的 JS 方法 myrefresh(), 在這個方法中通過單元格的 ID 動態改變該單元格中的顯示時間,同時通過 setTimeout() 在 1 秒後調用函數 myrefresh。由於 setTimeout()函數只會被調用一次,所以我們還需要在 myrefresh() 函數體中也加上這個函數,從而達到循環調用的效果,下面是具體的 JS 方法:

function myrefresh()

{

var tbl = document.getElementByIdx_x(“report1_N12”);

var myDate = new Date();

tbl.innerHTML=myDate.toLocaleString( );

setTimeout(‘myrefresh()’,1000);

}

setTimeout(‘myrefresh()’,1000);

4、預覽頁面效果
. 這樣,經過以上的簡單設置,我們就可以在 showReport.jsp 頁面中展現“設備故障分析.rpx”報表,並且在頁面上方看到實時變化的時間了,頁面效果如下:

報表實時顯示時間效果

通過這個簡單的例子,我們知道,就像開篇所說,報表不僅能夠呈現固定的統計彙總數據,還有相當不錯的動態展示能力。我們在這裏使用的定時調用 JS 改變單元格的值的方式,可以實現頁面局部內容的動態變化,而且沒有閃爍刷新,毫無違和感!

怎麼樣,意不意外?驚不驚喜?讓我們趕緊擼起袖子利用報表讓數據展現更加豐富起來吧!

作者:shiguang
鏈接:http://c.raqsoft.com.cn/article/1533395680659?r=xiaohuihui
來源:乾學院
著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章