JS隐藏sheet页

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

    针对于填报 sheet 页多的情况,有的 sheet 页是初始化不需要展示,或者说直接就是隐藏的;

    例如针对于一些计算用的,这些是不需要页面展示的 sheet 页,直接使用下面的方法即可。


    2. 思路

    通过添加 Web 属性填报加载结束事件来实现。


    3. 操作步骤

    对 sheet 页的隐藏可以通过两种方式,一种是通过坐标,另一种是通过名称。

    注:sheet 页支持变量赋名


    3.1 通过坐标隐藏 sheet 页

    模板包含的 sheet 如下,包括 5 个产品 sheet 和一个空 sheet:

    222


    点击菜单栏模板>模板 Web 属性>填报页面设置,选择“为该模板单独设置”后,添加一个“加载结束事件”,如下图:

    222

    JS 代码如下:

    $(".html-content").eq(index).hide();//隐藏内容
    $(".fr-tabpane-tabswrap > li").eq(index).hide();//隐藏按钮
    $(".fr-tabpane-tabswrap > li").eq(index+1).click();//点击下一个sheet页

    注:需要将代码 index 改成数字,从 0 开始,代表第一个 sheet 页

    保存模板并预览,可看到第一个sheet苹果汁被隐藏了。


    3.2 通过名称隐藏 sheet 页

    点击菜单栏模板>模板 Web 属性>填报页面设置,选择“为该模板单独设置”后,添加一个“加载结束事件”,如下图:

    222

    JS 代码如下:

    var sheet_name="SHEET页名称"; 
     var $sheet=$("li[title="+sheet_name+"]");
     if($sheet.find("span").hasClass("fr-sheetbutton-endpart")){ 
    $sheet.prev().find("span[class='fr-sheetbutton-thirdpart']").attr("class","fr-sheetbutton-endpart");
     };
     $sheet.remove();

    注:需将“sheet 页名称”改成需要隐藏的 sheet 名称。

    保存模板并预览,可看到名为巧克力的 sheet 被隐藏了。


    3.3 动态隐藏为空的 sheet

    点击菜单栏模板>模板 Web 属性>填报页面设置,选择“为该模板单独设置”后,添加一个“加载结束事件”,如下图:

    222

    JS 代码如下:

    //隐藏sheet名为空的sheet

    $('.fr-sheetbutton-middlepart').each(function(index,e){
    if(e.innerHTML==''){
    $('[title=""]').hide()
    }
    })

    保存模板点击填报预览后,可看到为空的 sheet 页被隐藏掉了。


    4. 预览效果

    4.1 PC 端预览效果

    使用上述三种隐藏方法,实现效果如下图:

    222


    4.2 移动端预览效果

    注:经测试,移动端不支持该效果


    5. 已完成模板

    模板效果在线查看请点击:JS 隐藏sheet页.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\41-JS隐藏sheet页.cpt

    点击下载模板


    附件列表


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

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

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