参数表单动态更改参数设置

用户可通过参数表单对报表结果进行查询,在选择条件时要求能够动态更改参数的输入。

如:

根据报表类型的不同设置不同的日期输入方式,如果为日报表、周报表等,只需要选择一个日期,报表在接收参数时即可通过该日期自动算出周一和周末的时间。针对此类需求,客户还可以要求自定义时间,及选择自定义时间后,生成起始日期和结束日期两个参数输入框,如图:

这样客户就能够根据自己的需求灵活的设置查询时间。

下面看下此需求的解决办法。

一:定义参数模板

其中C2单元格为下拉列表框供用户选择报表类型:

F2F3F4三个单元格设置为下拉日历供用户选择时间。

二:增加触发设置

因为客户要更改C2单元格内下拉框的值后要求动态改变参数输入框的值,此处可在某一单元格中增加一个自动计算即可,该自动计算中使用自定义javascript函数,当C2单元格值变后,触发该js,此处在B5单元格的自动计算中写入cdate(C2),及C2单元格变换后,触发该js函数

三:定义js函数,在显示报表的jsp页面中实现该js函数

function cdate(arg1){

              

                          var report=document.getElementById(“form1_F2″);//获取单元格对象

                          var report1=document.getElementById(“form1_F3″);

                          var report2=document.getElementById(“form1_F4″);

                          var report3=document.getElementById(“form1_E2″);

                          var report4=document.getElementById(“form1_E3″);

                          var report5=document.getElementById(“form1_E4″);

                         

                   //     report.style.backgroundColor=”#FF0000″;//

                          //alert(report.innerText);

                          if(arg1==7){

                                 report3.innerText=”";//设置单元格显示值

                                 report4.innerText=”起始日期“;

                                 report5.innerText=”结束日期“;

                   report.style.display = “none”;//控制隐藏

                   report1.style.display = “block”;  //控制显示

               report2.style.display = “block”;  //显示

             }

             else{

                    report3.innerText=”日期“;

                    report4.innerText=”";

                   report5.innerText=”";

                    report.style.display = “block”;//隐藏

                   report1.style.display = “none”;  //显示

               report2.style.display = “none”;  //显示

 

                   }

                  

 

                                             }

在该js函数中先获得要更改的单元格对象,然后通过该单元格的相关属性就能控制单元格是隐藏还是显示,这样就能达到动态更改参数输入框的要求。

热门文章