JS实现自由式填报表动态显示/隐藏行
一、需求描述
用户在进行报表填报数据时,有时候填报的内容行可能很多,需要通过滚动条上下拖动才能完成。而有些填报内容为选填,用户希望隐藏选填选填的内容。当用户需要填该部分内容的时候,再显示该部分内容。


二、实现思路
通过给下拉框控件添加【编辑后】JS事件来实现行的隐藏和显示。
三、示例
3.1下拉框控件添加自定义值
在C12单元格中添加下拉框控件,切换到数据字典,在类型设置中选择自定义,然后添加“设置”和“不设置”两组值。

3.2为下拉框控件赋初值
在C12单元格直接录入“不设置”作为控件的初始值。
3.3添加[加载结束]js事件
在菜单模板中选择模板Web属性下填报页面设置,在事件设置中增加“加载结束”事件。

JS代码
//页面加载结束后,隐藏教育经历部分
document.getElementById('r-12-0').style.display = 'none';//隐藏第12行
document.getElementById('r-13-0').style.display = 'none';//隐藏第13行
3.4添加下拉框控件【编辑后】事件
在下拉框事件编辑中添加“编辑后”事件。

//获取当前控件的值
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';
}
四、效果预览

附件列表
主题: 二次开发

