報(bào)表實(shí)時(shí)顯示時(shí)間

報(bào)表，除了相對(duì)靜態(tài)地展現(xiàn)匯總統(tǒng)計(jì)數(shù)據(jù)以及分布、趨勢(shì)等數(shù)據(jù)內(nèi)容外，也可以用于顯示和時(shí)間相關(guān)的即時(shí)信息，包括實(shí)時(shí)顯示時(shí)間。例如，下面這個(gè)設(shè)備監(jiān)控應(yīng)用統(tǒng)系中，首頁除了顯示實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)外，還需要在右上角顯示實(shí)時(shí)時(shí)間：

創(chuàng)新互聯(lián)于2013年成立，先為裕安等服務(wù)建站，裕安等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為裕安企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

這種形式的“動(dòng)態(tài)報(bào)表”其實(shí)在我們生活中也隨處可見，最常見的就是火車站大屏幕上的列車時(shí)刻表，上面顯示的當(dāng)前時(shí)間，讓旅客能夠一目了然地知道自己的列車還有多長(zhǎng)時(shí)間開，等待的列車什么時(shí)候到。

其實(shí)，要在報(bào)表中做到上面的效果很簡(jiǎn)單，基本思路就是讓頁面定時(shí)（比如每隔一秒鐘）調(diào)用JS方法，在JS中通過單元格的ID獲取到顯示時(shí)間的那個(gè)格子，將當(dāng)前時(shí)間作為這個(gè)格子的新值顯示就可以了。

---

下面，我們就具體看看如何通過潤乾報(bào)表實(shí)現(xiàn)這樣司空見慣的動(dòng)態(tài)顯示時(shí)間效果。

1、設(shè)置報(bào)表單元格表達(dá)式

前面第一個(gè)圖是在潤乾報(bào)表設(shè)計(jì)器自帶的報(bào)表“設(shè)備故障分析.rpx”的基礎(chǔ)上實(shí)現(xiàn)的，接下來我們就用這個(gè)報(bào)表作為例子進(jìn)行說明。我們首先在自帶報(bào)表中添加時(shí)間，合并N4、O4單元格，并在該合并格中設(shè)置單元格表達(dá)式=string(now(),”yyyy年MM月dd日 hh:MM:ss”)。

2、設(shè)置JSP頁面標(biāo)簽

然后，我們打開報(bào)表展現(xiàn)頁面showReport.jsp，在這個(gè)頁面中設(shè)置標(biāo)簽屬性generateCellId，以便報(bào)表單元格在頁面生成格子的ID。

打開原始的報(bào)表展現(xiàn)頁面，我們發(fā)現(xiàn)設(shè)置當(dāng)前時(shí)間的單元格，并沒有生成對(duì)應(yīng)的ID，如下圖所示：

為了在JS腳本中能夠通過ID可以獲得到該單元格，以便修改該單元格的值，我們需要在展現(xiàn)的頁面中添加標(biāo)簽屬性generateCellId=”yes”，如下圖所示：

設(shè)置了該屬性后，我們可以在頁面中可以看到，該單元格生成了對(duì)應(yīng)的id值：

3、設(shè)置頁面JS方法

接下來，我們?cè)谠趫?bào)表展現(xiàn)的頁面中添加動(dòng)態(tài)改變單元格值的JS方法myrefresh(),在這個(gè)方法中通過單元格的ID動(dòng)態(tài)改變?cè)搯卧裰械娘@示時(shí)間，同時(shí)通過setTimeout()在1秒后調(diào)用函數(shù)myrefresh。由于setTimeout()函數(shù)只會(huì)被調(diào)用一次，所以我們還需要在myrefresh()函數(shù)體中也加上這個(gè)函數(shù)，從而達(dá)到循環(huán)調(diào)用的效果，下面是具體的JS方法：

function myrefresh()

{

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

var myDate = new Date();

tbl.innerHTML=myDate.toLocaleString( );

setTimeout(‘myrefresh()’,1000);

}

setTimeout(‘myrefresh()’,1000);

4、預(yù)覽頁面效果

.這樣，經(jīng)過以上的簡(jiǎn)單設(shè)置，我們就可以在showReport.jsp頁面中展現(xiàn)“設(shè)備故障分析.rpx”報(bào)表，并且在頁面上方看到實(shí)時(shí)變化的時(shí)間了，頁面效果如下：

通過這個(gè)簡(jiǎn)單的例子，我們知道，就像開篇所說，報(bào)表不僅能夠呈現(xiàn)固定的統(tǒng)計(jì)匯總數(shù)據(jù)，還有相當(dāng)不錯(cuò)的動(dòng)態(tài)展示能力。我們?cè)谶@里使用的定時(shí)調(diào)用JS改變單元格的值的方式，可以實(shí)現(xiàn)頁面局部?jī)?nèi)容的動(dòng)態(tài)變化，而且沒有閃爍刷新，毫無違和感！

怎么樣，意不意外？驚不驚喜？讓我們趕緊擼起袖子利用報(bào)表讓數(shù)據(jù)展現(xiàn)更加豐富起來吧！

標(biāo)題名稱：報(bào)表實(shí)時(shí)顯示時(shí)間
本文鏈接：http://bm7419.com/article34/goehpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、企業(yè)建站、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、微信小程序、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)