JS制作导入进度条
1. 描述
场景描述：目前在Excel批量导入提交的地方会有需要进度条的要求，而且是真的进度条。
想要实现进度条效果，可以做一个模拟进度条特效，实现最终效果。如下图所示：
2. 思路
通过EXCEL导入按钮，增加导入之后JS事件来处理。
3. 操作步骤
打开报表，选择 模板>模板web属性>填报页面 设置，添加一个“EXCEL导入后” 事件。
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);
4. 移动端预览
4.1 PC端预览效果
保存模板，选择填报预览，实现效果如上图所示。
注：经过测试，手机端和h5不支持该效果。
5. 已完成模板
模板效果在线查看请点击：JS制作导入进度条.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\15-JS制作导入进度条.cpt
附件列表
标签：
9.0验证
文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）