1. 概述
1.1 问题描述在实现 Excel 批量导入提交时，会有需要进度条的要求，即在开始导入后，出现进度条显示导入当前导入比例。如下图所示，可以做一个模拟进度条特效，实现最终效果。 ![]()
1.2 实现思路通过 Excel 导入按钮，增加「Excel 导入后」JS 事件来实现效果。
2. 示例
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 预览效果保存模板，选择填报预览，实现效果下图所示： ![]()
注：不支持移动端。
3. 模板下载已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\15-JS制作导入进度条.cpt 点击下载模板：
15-JS制作导入进度条.cpt
(16.39 KB, 下载次数: 65)
编辑于 2021-4-28 14:12
| 
