历史版本11 :JS 实现动态隐藏参数以及控制参数面板高度 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
我们在开发报表的时候经常会遇到使用的参数控件较多的情况,而参数面板上的部分参数控件一般为默认选择值,这时候可以通过对这部分参数进行隐藏,并设置控制参数面板的高度,隐藏不需要的控件。
2. 实现思路编辑
通过增加两个参数按钮控件,一个查看所有控件,一个隐藏部分控件,通过点击这两个按钮增减参数面板上的控件,实现上面所述功能。
3. 操作步骤编辑
3.1 添加参数
在 FineReport 设计器中点击 文件>新建普通报表,在新建报表的参数面板上添加多个控件,如下图所示:
3.2 修改控件名称
1)分别选中参数面板上的 button1 和 button3 按钮控件,在右侧属性面板>控件设置>高级中,找到「按钮名字」在其右侧为这两个按钮控件添加名字,分别为「查看所有参数」和「隐藏所有参数」。下图只展示 button1 添加按钮名称后的情况:
2)分别选中参数面板上最后一行的控件,在右侧属性面板>控件设置>基本中,找到「控件名称」在其右侧分别输入控件名称 a,b,c,d,e,f。下图只展示其中一个控件添加控件名称后的情况:
3.3 添加点击事件
1)为「查看所有参数」按钮添加点击事件。
选中该按钮,在右侧属性面板>控件设置>事件中,添加点击事件,如下图所示:
JS 代码如下所示:
var a= this.options.form.getWidgetByName("a"); //获取名为a的控件
var b= this.options.form.getWidgetByName("b");
var c= this.options.form.getWidgetByName("c");
var d= this.options.form.getWidgetByName("d");
var e= this.options.form.getWidgetByName("e");
var f= this.options.form.getWidgetByName("f");
a.setVisible(true);
b.setVisible(true);
c.setVisible(true);
d.setVisible(true);
e.setVisible(true);
f.setVisible(true);
//1秒后查看所有参数
setTimeout(function() {
$('.parameter-container').css('height', '160px');
$('#content-container').css('top', '160px');
}, 1000);
2)为「隐藏所有参数」按钮添加点击事件。
选中该按钮,在右侧属性面板>控件设置>事件中,添加点击事件,如下图所示:
JS 代码如下所示:
var a= this.options.form.getWidgetByName("a");
var b= this.options.form.getWidgetByName("b");
var c= this.options.form.getWidgetByName("c");
var d= this.options.form.getWidgetByName("d");
var e= this.options.form.getWidgetByName("e");
var f= this.options.form.getWidgetByName("f");
a.setVisible(false);
b.setVisible(false);
c.setVisible(false);
d.setVisible(false);
e.setVisible(false);
f.setVisible(false);
//1秒后隐藏所有参数
setTimeout(function() {
$('.parameter-container').css('height', '105px');
$('#content-container').css('top', '105px');
}, 1000);
4. 效果查看编辑
保存模板,点击分页预览,PC 端效果如下所示:
注:该方法不支持移动端。
5. 已完成模板编辑
已完成的模板,请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\21-JS实现动态隐藏参数以及控制参数面板高度.cpt
点击下载模板:21-JS实现动态隐藏参数以及控制参数面板高度.cpt