JS制作导入进度条
1. 问题描述
目前在Excel批量导入提交的地方会有需要进度条的要求,而且是真的进度条。想要实现进度条效果,可以做一个模拟进度条特效,实现最终效果。

2. 实现思路
通过EXCEL导入按钮,增加 导入之后JS事件 来处理
3. 示例讲解
打开报表,选择 模板>模板web属性>填报页面 设置,添加一个“EXCEL导入后” 事件。

javascript脚本:
-- 引用外部的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"/>');
--NEW一个对象
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);
保存,预览效果如上图。
附件列表
主题: 二次开发

