JS制作导入进度条

编辑
  • 文档创建者:yiyemeiying
  • 浏览次数:4461次
  • 编辑次数:11次
  • 最近更新:Kevin-s 于 2019-06-22
  • 1. 描述

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

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

    222

    2. 思路

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

    3. 操作步骤

    打开报表,选择 模板>模板 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);

    4. 移动端预览

    4.1 PC 端预览效果

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

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


    5. 已完成模板

    模板效果在线查看请点击:JS 制作导入进度条.cpt

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

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

    此页面有帮助吗?只是浏览 [ 去社区提问 ]