JS隐藏sheet页

1. 描述
2. 思路
3. 操作步骤
4. 预览效果
5. 已完成模板

1. 描述

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

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

2. 思路

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

3. 操作步骤

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

注：sheet页支持变量赋名

3.1 通过坐标隐藏sheet页

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

模板>模板web属性>填报页面设置，选择“为该模板单独设置”后，添加一个“加载结束事件”，如下图：

$(".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属性>填报页面设置，选择“为该模板单独设置”后，添加一个“加载结束事件”，如下图：

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属性>填报页面设置，选择“为该模板单独设置”后，添加一个“加载结束事件”，如下图：

//隐藏sheet名为空的sheet $('.fr-sheetbutton-middlepart').each(function(index,e){ if(e.innerHTML==''){ $('[title=""]').hide() } })

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

4. 预览效果

4.1 PC端预览效果

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

4.2 移动端预览效果

注：经测试，移动端不支持该效果

5. 已完成模板

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

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

点击下载模板

主题：

标签：隐藏填报SHEET页填报 SHEET页 SHEET 隐藏已验证 9.0验证