JS隐藏行和列

1. 概述
1.1 问题描述

在填报过程中，有时候可能想要实现点击某个按钮，隐藏特定的行数和列数。该如何实现呢？

1.2 解决思路

通过给按钮控件添加点击事件，即可实现隐藏行列。

注：该隐藏行/列的方法不支持导出。

2. 示例一：隐藏行
2.1 新建模板

新建普通报表，保存为：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\35-JS隐藏行或列示例一.cpt

报表样式如下图所示：

2.2 设置按钮控件

选中 A1 单元格，点击控件，设置为按钮控件，按钮类型为普通，按钮名称为关闭第二、三、四行，如下图所示：

2.3 添加点击事件

选中 A1 单元格，点击控件>事件，添加点击事件，输入 JavaScript 代码，如下图所示：

JavaScript 代码如下：

1. $("#r-1-0").toggle();
   
2. $("#r-2-0").toggle();
   
3. $("#r-3-0").toggle();
   
4. if (contentPane.curLGP.$editor) {
   
5. contentPane.curLGP.$editor.toggle();
   
6. }
   
7. 注：8.0 中可以不加 if (contentPane.curLGP.$editor) { contentPane.curLGP.$editor.toggle(); }这段 JS 代码，6.5 和 7.0 在后面需要加上这段代码。
   
8. 
   
9. 当模板中存在多个 Sheet 时，则 JavaScript 代码为：
   
10. 
    
11. 注：$("#r-1-0")中的 0 表示 Sheet 的位置（从 0 开始计算）
    
12. 
    
13. $("#r-1-0").toggle();
    
14. $("#r-2-0").toggle();
    
15. $("#r-3-0").toggle();
    
16. if (contentPane.curLGP.$editor) {
    
17. contentPane.curLGP.$editor.toggle();
    
18. }

复制代码

2.4 效果预览

保存模板，点击填报预览，效果如下图所示：

注：不支持移动端。

3. 示例二：隐藏列
3.1 新建模板

新建普通报表，保存为：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\35-JS隐藏行或列示例二.cpt

报表样式如下图所示：

3.2 设置按钮控件

选中 A1 单元格，点击控件，设置为按钮控件，按钮类型为普通，按钮名称为点击隐藏B、C两列，如下图所示：

3.3 添加点击事件

选中 A1 单元格，点击控件>事件，添加点击事件，输入 JavaScript 代码，如下图所示：

JavaScript 代码如下：

1. $("td[id^='B']").toggle();//隐藏B列  
   
2. $("td[id^='C']").toggle();//隐藏C列
   
3. 当模板中存在多个 Sheet 时，则 JavaScript 代码为：
   
4. 
   
5. 注：$("B1-0-0")中第一个 0 表示 Sheet 的位置（从 0 开始计算）。
   
6. 
   
7. $("#B1-0-0").toggle();//隐藏B列  
   
8. $("#C1-0-0").toggle();//隐藏C列

复制代码

3.4 效果预览

保存模板，点击填报预览，效果如下图所示：

注：不支持移动端。

4. 模板下载
4.1 示例一：隐藏行

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\35-JS隐藏行或列示例一.cpt

点击下载模板：35-JS隐藏行或列示例一.cpt

4.2 示例二：隐藏列

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\35-JS隐藏行或列示例二.cpt

点击下载模板：35-JS隐藏行或列示例二.cpt

如果一开始的状态是隐藏的要怎么设置

有冻结和合并列的能隐藏吗

只是预览时隐藏了，打印时还有。即使设置了不打印和导出，如果有边框的话，也是无法隐藏边框。这种方法隐藏的列，在打印时，还是在页面上占用空白空间。好像没有打印时完全隐藏的方法。
其实想实现的效果是，打印时完全隐藏行，不占用空白列，且表格居中显示。

这个看起来很厉害的样子，不过可以条件属性隐藏行列，我觉得既然有这样的做法，后面应该是会有需求的，加油！！！

你是什么版本，我10版本没有生效，填报预览