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

目录:

一、需求描述

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


222
222

二、实现思路

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

三、示例

3.1下拉框控件添加自定义值

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

222

3.2为下拉框控件赋初值

在C12单元格直接录入“不设置”作为控件的初始值。

3.3添加[加载结束]js事件

在菜单模板中选择模板Web属性下填报页面设置,在事件设置中增加“加载结束”事件。

222


JS代码

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

3.4添加下拉框控件【编辑后】事件

在下拉框事件编辑中添加“编辑后”事件。

222

//获取当前控件的值 var a=this.getValue(); //如果‘设置’则显示,如果‘不设置’则隐藏 if(a=="设置") { document.getElementById('r-12-0').style.display = ''; document.getElementById('r-13-0').style.display = ''; } else { document.getElementById('r-12-0').style.display = 'None'; document.getElementById('r-13-0').style.display = 'None'; } 

四、效果预览

222

附件列表


主题: 二次开发
标签: JS 显示隐藏行

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(微信ID:frbiaoge)