JS實現普通報表顯示實時時間

1.1 問題描述

如果想在報表裏實時顯示時間，該如何實現呢？如下圖所示：

1.2 實現思路

獲取當前的時間，一秒重新整理一次報表，將當前時間顯示在某個儲存格中。

普通報表中透過新增 JS 實現 ，JS 程式碼中每秒獲取一次時間。

注：FVS 視覺化看板請參見文檔 FVS時間組件 ，決策報表請參見文檔 JS實現決策報表顯示實時時間 。

2.1 準備範本

建立範本，調整儲存格高寬佈局，準備讓時間實時顯示在 C4 儲存格中，為效果明顯，給 C4 儲存格新增邊框，如下圖所示：

2.2 新增事件

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

JavaScript 程式碼如下：

注：JS 程式碼中，設定實時事件顯示在 C4 儲存格，使用時可根據實際情況修改，此 JS 的優點是每秒只重新整理指定的儲存格，頁面其他內容不會受到影響。

//每秒執行一次
setInterval(function() {
//將當前時間指派給M
    var M = FR.remoteEvaluate('FORMAT(now(),"yyyy-MM-dd HH:mm:ss")');
    //給C4儲存格指派M
    _g().setCellValue("C4", null, M);
}, 1000);

2.3 預覽效果

儲存範本，點選「填報預覽」，為效果明顯，儲存格新增了邊框，效果如下圖所示：

注：不支援行動端

3.1 準備範本

建立範本，調整儲存格高寬佈局，準備讓時間實時顯示在 A1 儲存格中，為效果明顯，給 A1 儲存格新增邊框。

3.2 新增事件

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

JavaScript 程式碼如下：

注：JS 程式碼中，設定實時事件顯示在 A1 儲存格，使用時可根據實際情況修改。

function Appendzero(obj)   
    {  
        if(obj<10) return "0" +""+ obj; //判斷obj是否小於10，如果小於10，則在數字前面加上"0"補位  
        else return obj;   
    }    
FR.CLOCK = function(cell)  
{   
    var cl = $('[id^='+cell+'-]');  
//因為後面呼叫使用了 FR.CLOCK('A1')，即得到A1的柄  
    setInterval(function(){   
        var date=new Date();//獲取當時日期  
        var format=date.getFullYear()+"-"+Appendzero(date.getMonth()+1)+"-"+Appendzero(date.getDate())+" "+Appendzero(date.getHours())+":"+Appendzero(date.getMinutes())+":"+Appendzero(date.getSeconds());//format 是一個數符串，把年-月-日 小時：分鐘：秒組合到一起了，呼叫了Appendzero（）函式，進行補位操作  
        cl.html(format);   
//C1,傳來的儲存格，使儲存格里顯示日期  
    },1000);  
//1000毫秒=1秒，即1秒鐘重新整理一次   
} ;   
FR.CLOCK('A1');  
//這裏是關鍵，A1是傳的儲存格，傳給CLOCK方法
显示代码

3.3 效果預覽

儲存範本，點選「填報預覽」，為效果明顯，儲存格新增了邊框，效果如下圖所示：

注：不支援行動端。

點選下載範本：

JS顯示即時或實時時間範例一.cpt

JS顯示即時或實時時間範例二.cpt