JS制作導入進度條

1.1 問題描述

在實現 Excel 批量導入提交時，會有需要進度條的要求，即在開始導入後，出現進度條顯示導入當前導入比例。如下圖所示，可以做一個模拟進度條特效，實現最終效果。

1.2 實現思路

通過 Excel 導入按鈕，增加「Excel 導入後」JS 事件來實現效果。

2.1 準備模板

打開報表，選擇 模板>模板 Web 屬性>填報頁面 設置，添加一個“Excel 導入後” 事件。

JS 代碼如下：

FR.$defaultImport('/com/fr/write/web/excel/es.js', 'js');    
//-- 引用外部的CSS文件  
FR.$defaultImport('/com/fr/write/web/excel/es.css', 'css');    
//-- 創建一個DIV，設置相關參數(值)  
var div = $('<div style="width:200px;height:20px;z-index:10000;left: 800px;top: 0px;position:absolute"/>');    
FR.processbar =new FR.SingleProgressBar();   
//--賦初值  
FR.processpane = div;    
$(FR.processbar.element).appendTo(div);   
//--将DIV與BODY頁面關聯  
div.appendTo($('body'));   
//--執行方法,每0.5秒執行一次  
setInterval(function() {    
    var v = FR.processbar.value;   
//--執行條件判斷  
    if (v < 100) {    
//--每次執行的内容  
        FR.processbar.setValue(v + 10);    
    }    
}, 500);    
FR.processbar.setValue(100);  
//--執行方法,每0.5秒執行一次  
setTimeout(function() {    
    FR.processpane.hide();    
}, 500);
顯示代碼

2.2 預覽效果

保存模板，選擇填報預覽，實現效果下圖所示：

注：不支持移動端。

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\15-JS制作導入進度條.cpt

點擊下載模板：15-JS制作導入進度條.cpt