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

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

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

一：問題描述

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

二：解決方案

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

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

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

三：樣本

開啟模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\parameter\MutiValue.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%\WebReport\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.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代碼在Firefox，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。