快捷導(dǎo)航

數(shù)據(jù)分析軟件之FineReport教程：[5]參數(shù)界面JS（全）

更新時(shí)間：2015年08月13日 17:09:33 投稿：mrr

表格軟件FineReport在設(shè)計(jì)報(bào)表時(shí)經(jīng)常會(huì)用到，這篇文章主要介紹數(shù)據(jù)分析軟件之FineReport教程：[5]參數(shù)界面JS，需要的朋友可以參考下

在用報(bào)表工具設(shè)計(jì)報(bào)表時(shí)，使用參數(shù)控件時(shí)，有時(shí)我們希望部分參數(shù)控件在沒(méi)滿足條件時(shí)不顯示，滿足條件后再顯示，接下來(lái)我就來(lái)教教大家怎么做！

表格軟件如何根據(jù)條件控制參數(shù)控件是否顯示

一：?jiǎn)栴}描述

在使用參數(shù)控件時(shí)，有時(shí)我們希望部分參數(shù)控件在沒(méi)滿足條件時(shí)不顯示，滿足條件后再顯示，如下圖效果：只有前面的下拉款選擇了內(nèi)容之后，后一層下拉框控件才顯示出來(lái)：

二：解決方案

首先將被控制的控件初始化為不可見或者不可用，然后在條件控件上增加編輯結(jié)束事件，通過(guò)js腳本設(shè)置被控制控件可見或可用，對(duì)應(yīng)的js方法如下：

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

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

三：示例

打開模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\parameter\MutiValue.cpt

我們用這個(gè)模板中的area作為條件控件，province作為被控控件來(lái)說(shuō)明設(shè)置過(guò)程。

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

點(diǎn)擊province控件，選擇屬性表>基本屬性將可見勾選掉，如下圖：

五：條件控件的事件設(shè)置

給area控件添加編輯后事件，調(diào)用JS方法將province控件設(shè)定為可見，具體的代碼如下：

選擇參數(shù)area的下拉框控件，選擇屬性表的事件面板，增加一個(gè)編輯結(jié)束事件，如下圖：

圖中的代碼內(nèi)容是：

其中代碼為：

.  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("請(qǐng)選擇地區(qū)");

日期控件校驗(yàn)JS

一：概述

內(nèi)置參數(shù)查詢界面當(dāng)中可進(jìn)行一些數(shù)據(jù)校驗(yàn)，例如有兩個(gè)參數(shù)：開始日期和結(jié)束日期，下面我們要校驗(yàn)的是：開始日期與結(jié)束日期不能為空，結(jié)束日期必須在開始日期之后以及結(jié)束日期必須在開始日期后的某個(gè)時(shí)間段內(nèi)，否則提示相關(guān)信息，對(duì)此可以在查詢按鈕中增加事件。下面介紹下具體的設(shè)置。

具體效果圖如下：

步驟閱讀

具體錯(cuò)誤見效果圖報(bào)錯(cuò)警告。

二：打開模板

打開模板：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.cpt。

如下圖參數(shù)界面：

三：增加事件

給查詢按鈕增加點(diǎn)擊事件，具體的JS代碼如下：

var start = this.options.form.getWidgetByName("starttime").getValue(); 
var end = this.options.form.getWidgetByName("endtime").getValue(); 
if( start == "" || start==null){ //判斷開始日期是否為空
 alert("錯(cuò)誤,開始時(shí)間不能為空"); //開始日期參數(shù)為空時(shí)提示
 return false; 
}; 
if(end == "" || end==null){ //判斷結(jié)束日期是否為空
 alert("錯(cuò)誤,結(jié)束時(shí)間不能為空"); //結(jié)束日期參數(shù)為空時(shí)提示
 return false; 
}; 
if( start > end){ //判斷開始日期是否大于結(jié)束日期
 alert("錯(cuò)誤,開始時(shí)間不能大于結(jié)束時(shí)間"); //開始日期大于結(jié)束日期時(shí)提示 
 return false; 
}
var startdate = new Date(start); //將開始日期轉(zhuǎn)化為Date型
var enddate = new Date(end); //將結(jié)束日期轉(zhuǎn)化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24); //將兩個(gè)日期相減得出的毫秒數(shù)轉(zhuǎn)化為天數(shù)
if(subdate>15){ //判斷結(jié)束日期是否超過(guò)開始日期后15天
alert("錯(cuò)誤,結(jié)束日期必須在開始日期15天之內(nèi)"); //結(jié)束日期超過(guò)開始日期后的十五天時(shí)提示
return false;
}

注：雖然參數(shù)控件中也可以設(shè)置校驗(yàn)，但是參數(shù)控件要點(diǎn)擊控件后才能進(jìn)行校驗(yàn)，因此參數(shù)界面的不能為空以及比較校驗(yàn)需要在查詢按鈕中設(shè)置。

四：效果查看

分頁(yè)預(yù)覽模板，選擇開始時(shí)間和結(jié)束時(shí)間，使這兩個(gè)日期之間相差超過(guò)15天，就會(huì)彈出上述對(duì)話框。

注：上述js代碼在火狐，谷歌IE9等瀏覽器下沒(méi)有問(wèn)題，但是在IE8以及IE8以下的ie瀏覽器版本中時(shí)判斷兩個(gè)日期之間的差值的警告框則不會(huì)起作用?？捎靡韵麓a：

var start = this.options.form.getWidgetByName("starttime").getValue(); 
var end = this.options.form.getWidgetByName("endtime").getValue(); 
if( start == "" || start==null){ //判斷開始日期是否為空 
 alert("錯(cuò)誤,開始時(shí)間不能為空"); //開始日期參數(shù)為空時(shí)提示 
 return false; 
}; 
if(end == "" || end==null){ //判斷結(jié)束日期是否為空 
 alert("錯(cuò)誤,結(jié)束時(shí)間不能為空"); //結(jié)束日期參數(shù)為空時(shí)提示 
 return false; 
}; 
if( start > end){ //判斷開始日期是否大于結(jié)束日期 
 alert("錯(cuò)誤,開始時(shí)間不能大于結(jié)束時(shí)間"); //開始日期大于結(jié)束日期時(shí)提示 
 return false; 
} 
var aDate = start.split("-") 
var startdate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //轉(zhuǎn)換為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) //把相差的毫秒數(shù)轉(zhuǎn)換為天數(shù) 
alert(subdate);
if(subdate>15){ //判斷結(jié)束日期是否超過(guò)開始日期后15天 
alert("錯(cuò)誤,結(jié)束日期必須在開始日期15天之內(nèi)"); //結(jié)束日期超過(guò)開始日期后的十五天時(shí)提示 
return false; 
}

清空(重置)條件

一：?jiǎn)栴}描述

在使用控件時(shí)，有時(shí)我們希望能夠快捷的重置控件的內(nèi)容，或者重置所有控件的內(nèi)容，效果如下圖所示：

二：解決方案

只重置一個(gè)控件的值時(shí)，我們可以在js事件中獲取需要重置的控件，執(zhí)行reset()方法，從而清空該控件的內(nèi)容。

當(dāng)我們需要重置全部控件時(shí)，可以通過(guò)form.name_widgets獲取參數(shù)界面上所有的控件，然后遍歷每個(gè)控件并重置，代碼如下：

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

三：重置單個(gè)控件內(nèi)容的按鈕

以上圖中清空供應(yīng)商按鈕為例，說(shuō)明如何重置單個(gè)控件內(nèi)容。

在參數(shù)設(shè)計(jì)頁(yè)面新建一個(gè)按鈕控件，設(shè)定其名字為清空供應(yīng)商，同時(shí)設(shè)置按鈕點(diǎn)擊事件，將供應(yīng)商(supplierID)控件內(nèi)容清空，具體的js如下：

var supplierID = this.options.form.getWidgetByName("supplierID"); //獲取supplierID控件
supplierID.reset(); //將supplierID控件內(nèi)容清空

四：重置所有控件內(nèi)容
在參數(shù)界面新建一個(gè)按鈕控件，設(shè)定其名字為清空全部，同時(shí)設(shè)置按鈕點(diǎn)擊事件，事件js腳本為：

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

隱藏參數(shù)界面向上向下的三角按鈕

一：?jiǎn)栴}描述

我們?cè)陬A(yù)覽帶有參數(shù)面板的模板的時(shí)候，會(huì)發(fā)現(xiàn)其參數(shù)界面與主體界面交接處有一個(gè)三角按鈕，那么如何隱藏該按鈕呢？

二：解決思路

在模板加載結(jié)束后，拿到該按鈕元素，然后設(shè)置其隱藏，或者直接去掉即可。

隱藏按鈕

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

去掉按鈕

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

三：示例

我們以GettingStarted.cpt模板為例，想要在模板展示的時(shí)候就隱藏參數(shù)界面的三角按鈕。

打開設(shè)計(jì)器，雙擊該模板，切換到參數(shù)面板編輯界面，單擊一下參數(shù)面板的空白處，選中參數(shù)面板，添加一個(gè)初始化后事件，如下圖：

四：js代碼如下：

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

五：效果查看

保存模板，點(diǎn)擊預(yù)覽，即可看到三角按鈕不再顯示，如下圖：

參數(shù)控件賦值

一：概述

參數(shù)界面中，往往需要在一個(gè)控件中動(dòng)態(tài)的控制其他控件的值，如下圖，當(dāng)username有值時(shí)，state自動(dòng)變?yōu)?，否則變?yōu)?:：

二：解決方案

可以通過(guò)js腳本獲取到需要的控件，從而獲得控件的值，及給控件賦值。

注：不能給控件置數(shù)為0，JS里面，0表示false。且一個(gè)控件無(wú)法對(duì)另一個(gè)控件的顯示值進(jìn)行置數(shù)。

三：參數(shù)界面

如下圖參數(shù)界面

username控件類型為下拉框，數(shù)據(jù)自定義，實(shí)際值和顯示值都為：jerny，anna，merry。

state控件類型選擇單選按鈕組，數(shù)據(jù)也為自定義，實(shí)際值和顯示值都為：1，2。

四：JS事件設(shè)置

在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);
}

該段代碼是用來(lái)對(duì)state參數(shù)置數(shù)，當(dāng)username為空時(shí)，!username為真，此時(shí)將state置數(shù)為2,否則當(dāng)username有值時(shí)，將state置數(shù)為1。

您可能感興趣的文章: