JS制作导入进度条

编辑
文档创建者:yiyemeiying (78157 )     浏览次数:2246次     编辑次数:7次     最近更新:天狮座 于 2018-04-25     

目录:

1. 描述编辑

场景描述:目前在Excel批量导入提交的地方会有需要进度条的要求,而且是真的进度条。

想要实现进度条效果,可以做一个模拟进度条特效,实现最终效果。

222


2. 实现思路编辑

通过EXCEL导入按钮,增加导入之后JS事件来处理。

3. 示例讲解编辑

打开报表,选择 模板>模板web属性>填报页面 设置,添加一个“EXCEL导入后” 事件。



222



javascript脚本:
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.移动端预览编辑

经过测试,手机端和h5不支持该效果。

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?