JS制作导入进度条

编辑
文档创建者:yiyemeiying (78157 )     浏览次数:2604次     编辑次数:10次     最近更新:ukae 于 2018-08-10     

目录:

1. 描述编辑

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

想要实现进度条效果,可以做一个模拟进度条特效,实现最终效果。如下图所示:

222

2. 思路编辑

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

3. 操作步骤编辑

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

222
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);

4. 移动端预览编辑

4.1 PC端预览效果

保存模板,选择填报预览,实现效果如上图所示。

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

5. 已完成模板编辑

模板效果在线查看请点击:JS制作导入进度条.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\15-JS制作导入进度条.cpt


附件列表


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

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗? [ 去社区提问 ]