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