JS实现自由式填报表动态显示/隐藏行

1. 概述
1.1问题描述

用户在进行报表填报数据时，有时候填报的内容行可能很多，需要通过滚动条上下拖动才能完成。而有些填报内容为选填，用户希望隐藏选填选填的内容。当用户需要填该部分内容的时候，再显示该部分内容。实现效果如下图：

1.2 实现思路

通过给下拉框控件添加【编辑后】JS 事件来实现行的隐藏和显示。

2. 示例
2.1 模板设置

打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeForm\填报联动.cpt

修改模板中的单元格样式及内容，在 C12 单元格直接录入“不设置”作为控件的初始值，如下图：

2.2 控件设置

在 C12 单元格中添加下拉框控件，切换到数据字典，在类型设置中选择自定义，然后添加“设置”和“不设置”两组值。

2.3 添加事件

选中 C12 下拉框控件，添加“编辑后”事件，如下图所示：

1. //获取当前控件的值
   
2. var a=this.getValue();
   
3. //如果‘设置’则显示，如果‘不设置’则隐藏
   
4. if(a=="设置")
   
5. {
   
6. document.getElementById('r-12-0').style.display = '';
   
7. document.getElementById('r-13-0').style.display = '';
   
8. }
   
9. else
   
10. {
    
11. document.getElementById('r-12-0').style.display = 'None';
    
12. document.getElementById('r-13-0').style.display = 'None';
    
13. }

复制代码

选择模板>模板 Web 属性>填报页面设置，添加“加载结束”事件，设置页面默认样式（隐藏教育经历部分），如下图所示：

1. //页面加载结束后，隐藏教育经历部分
   
2. document.getElementById('r-12-0').style.display = 'none';//隐藏第13行
   
3. document.getElementById('r-13-0').style.display = 'none';//隐藏第14行

复制代码

2.4 预览效果

保存模板，选择填报预览，PC 端实现效果下图所示：

注：此 JS 不支持移动端使用

3. 模板下载

模板效果在线查看请点击：JS 实现自由式填报表动态显示或隐藏行.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\31-JS实现自由式填报表动态显示或隐藏行.cpt

点击下载模板：31-JS实现自由式填报表动态显示或隐藏行.cpt

这个打印的时候会把隐藏行一起打印出来，有什么办法解决吗

如果隐藏行是拓展行，则不适用，拓展行不会被隐藏

不错的思路。

不能直接条件判断去隐藏？

提示错误：CustomJSError :Cannot readproperties of null(reading 'style")