資料分析軟體之FineReport教學：[5]參數介面JS（全）_javascript技巧

用報表工具設計報表時，使用參數控制項時，有時我們希望部分參數控制在沒滿足條件時不顯示，滿足條件後再顯示，接下來我就來教大家怎麼做！

表格軟體如何依照條件控制參數控制項是否顯示

一：問題描述

在使用參數控制時，有時我們希望部分參數控制在沒滿足條件時不顯示，滿足條件後再顯示，如下圖效果：只有前面的下拉款選擇了內容之後，後一層下拉框控制才顯示出來：

二：解

首先將被控制的控制初始化為不可見或不可用，然後在條件控制項上增加編輯結束事件，透過js腳本設定被控制控制項可見或可用，對應的js方法如下：

setEnable(boolean)：設定是否可用，true為可用，false為不可用；

setVisible(boolean)：設定是否可見，true為可見，false為不可見；

三：範例

開啟模板%FR_HOME%WebReportWEB-INFreportletsdocparameterMutiValue.cpt

我們用這個模板中的area作為條件控件，province作為被控控件來說明設定過程。

四：初始化被控控制為不可見

點選province控件，選擇屬性表>基本屬性將可見勾選掉，如下圖：

五：條件控制項的事件設定

為area控制項新增編輯後事件，呼叫JS方法將province控制設定為可見，具體的程式碼如下：

選擇參數area的下拉框控件，選擇屬性表的事件面板，增加一個編輯結束事件，如下圖：

圖中的程式碼內容是：

其中程式碼為：

.  var province=this.options.form.getWidgetByName("province");                                      var area=this.options.form.getWidgetByName("area"); 
.  var thislen = this.getValue(area).length; 
.  if(thislen) province.setVisible(true); 
.  else alert("请选择地区"); 

日期控制項校驗JS

一：概述

內建參數查詢介面當中可進行一些資料校驗，例如有兩個參數：開始日期和結束日期，下面我們要校驗的是：開始日期與結束日期不能為空，結束日期必須在開始日期之後以及結束日期必須在開始日期後的某個時間段內，否則提示相關信息，對此可以在查詢按鈕中增加事件。下面介紹下具體的設定。

具體效果圖如下：

步驟閱讀

具體錯誤請見效果圖報錯誤警告。

二：開啟模板

開啟範本：%FR_HOME%WebReportWEB-INFreportletsdocParameterTimeScaleTimeScale.cpt。

如下圖參數介面：

 

三：增加事件

為查詢按鈕增加點擊事件，具體的JS程式碼如下：

var start = this.options.form.getWidgetByName("starttime").getValue(); 
var end = this.options.form.getWidgetByName("endtime").getValue(); 
if( start == "" || start==null){ //判断开始日期是否为空
 alert("错误,开始时间不能为空"); //开始日期参数为空时提示
 return false; 
}; 
if(end == "" || end==null){ //判断结束日期是否为空
 alert("错误,结束时间不能为空"); //结束日期参数为空时提示
 return false; 
}; 
if( start > end){ //判断开始日期是否大于结束日期
 alert("错误,开始时间不能大于结束时间"); //开始日期大于结束日期时提示 
 return false; 
}
var startdate = new Date(start); //将开始日期转化为Date型
var enddate = new Date(end); //将结束日期转化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24); //将两个日期相减得出的毫秒数转化为天数
if(subdate>15){ //判断结束日期是否超过开始日期后15天
alert("错误,结束日期必须在开始日期15天之内"); //结束日期超过开始日期后的十五天时提示
return false;
}

附註：雖然參數控制項中也可以設定校驗，但是參數控制項要點選控制項後才能進行校驗，因此參數介面的不能為空以及比較校驗需要在查詢按鈕中設定。

四：效果查看

分頁預覽模板，選擇開始時間和結束時間，讓這兩個日期之間相差超過15天，就會跳出上述對話框。

附註：上述js程式碼在火狐，GoogleIE9等瀏覽器下沒有問題，但是在IE8以及IE8以下的ie瀏覽器版本中時判斷兩個日期之間的差值的警告框則不會起作用。可用以下程式碼：

var start = this.options.form.getWidgetByName("starttime").getValue(); 
var end = this.options.form.getWidgetByName("endtime").getValue(); 
if( start == "" || start==null){ //判断开始日期是否为空 
 alert("错误,开始时间不能为空"); //开始日期参数为空时提示 
 return false; 
}; 
if(end == "" || end==null){ //判断结束日期是否为空 
 alert("错误,结束时间不能为空"); //结束日期参数为空时提示 
 return false; 
}; 
if( start > end){ //判断开始日期是否大于结束日期 
 alert("错误,开始时间不能大于结束时间"); //开始日期大于结束日期时提示 
 return false; 
} 
var aDate = start.split("-") 
var startdate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为MM-dd-yyyy格式 
alert(startdate);
var aDate = end.split("-") 
var enddate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) 
alert(enddate);
var subdate= ((enddate - startdate) /1000/ 60/60/24) //把相差的毫秒数转换为天数 
alert(subdate);
if(subdate>15){ //判断结束日期是否超过开始日期后15天 
alert("错误,结束日期必须在开始日期15天之内"); //结束日期超过开始日期后的十五天时提示 
return false; 
}

清空(重置)条件

一：问题描述

在使用控件时，有时我们希望能够快捷的重置控件的内容，或者重置所有控件的内容，效果如下图所示：

 

二：解决方案

只重置一个控件的值时，我们可以在js事件中获取需要重置的控件，执行reset()方法，从而清空该控件的内容。

当我们需要重置全部控件时，可以通过form.name_widgets获取参数界面上所有的控件，然后遍历每个控件并重置，代码如下：

$.each(this.options.form.name_widgets,function(i,item){ 
 if (item.options.type !=='label') {item.setValue();item.setText();} 
});;

三：重置单个控件内容的按钮

以上图中清空供应商按钮为例，说明如何重置单个控件内容。

在参数设计页面新建一个按钮控件，设定其名字为清空供应商，同时设置按钮点击事件，将供应商(supplierID)控件内容清空，具体的js如下：

var supplierID = this.options.form.getWidgetByName("supplierID"); //获取supplierID控件
supplierID.reset(); //将supplierID控件内容清空

四：重置所有控件内容
在参数界面新建一个按钮控件，设定其名字为清空全部，同时设置按钮点击事件，事件js脚本为：

$.each(this.options.form.name_widgets,function(i,item){ 
 if (item.options.type !=='label') {item.setValue();item.setText();} 
});;

隐藏参数界面向上向下的三角按钮

一：问题描述

我们在预览带有参数面板的模板的时候，会发现其参数界面与主体界面交接处有一个三角按钮，那么如何隐藏该按钮呢？

 

二：解决思路

在模板加载结束后，拿到该按钮元素，然后设置其隐藏，或者直接去掉即可。

隐藏按钮

$('.parameter-container-collapseimg-up').hide();

去掉按钮

$('.parameter-container-collapseimg-up').remove();

三：示例

我们以GettingStarted.cpt模板为例，想要在模板展示的时候就隐藏参数界面的三角按钮。

打开设计器，双击该模板，切换到参数面板编辑界面，单击一下参数面板的空白处，选中参数面板，添加一个初始化后事件，如下图：

 

四：js代码如下：

setTimeout(function() {
 $('.parameter-container-collapseimg-up').hide();
}, 10);

五：效果查看

保存模板，点击预览，即可看到三角按钮不再显示，如下图：

 

参数控件赋值

一：概述

参数界面中，往往需要在一个控件中动态的控制其他控件的值，如下图，当username有值时，state自动变为1，否则变为2:：

 

二：解决方案

可以通过js脚本获取到需要的控件，从而获得控件的值，及给控件赋值。

注：不能给控件置数为0，JS里面，0表示false。且一个控件无法对另一个控件的显示值进行置数。

三：参数界面

如下图参数界面

username控件类型为下拉框，数据自定义，实际值和显示值都为：jerny，anna，merry。

state控件类型选择单选按钮组，数据也为自定义，实际值和显示值都为：1，2。

 

四：JS事件设置

在username的事件编辑中添加编辑后事件，JS代码如下：

var state= this.options.form.getWidgetByName("state");
var username = this.options.form.getWidgetByName("username").getValue();
if (!username){
state.setValue(2);
}else{
state.setValue(1);
}

此段代碼是用來對state參數置數，當username為空時，!username為真，此時將state置數為2,否則當username有值時，將state置數為1。