數據分析軟件之FineReport教程：[5]參數界面JS（全）
在用報表工具設計報表時，使用參數控件時，有時我們希望部分參數控件在沒滿足條件時不顯示，滿足條件后再顯示，接下來我就來教教大家怎么做！
表格軟件如何根據條件控制參數控件是否顯示
一：問題描述
在使用參數控件時，有時我們希望部分參數控件在沒滿足條件時不顯示，滿足條件后再顯示，如下圖效果：只有前面的下拉款選擇了內容之后，后一層下拉框控件才顯示出來：
二：解決方案
首先將被控制的控件初始化為不可見或者不可用，然后在條件控件上增加編輯結束事件，通過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("請選擇地區(qū)");
日期控件校驗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代碼在火狐，谷歌IE9等瀏覽器下沒有問題，但是在IE8以及IE8以下的ie瀏覽器版本中時判斷兩個日期之間的差值的警告框則不會起作用?？捎靡韵麓a：
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事件中獲取需要重置的控件，執(zhí)行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();}
});;
隱藏參數界面向上向下的三角按鈕
一：問題描述
我們在預覽帶有參數面板的模板的時候，會發(fā)現(xiàn)其參數界面與主體界面交接處有一個三角按鈕，那么如何隱藏該按鈕呢？
二：解決思路
在模板加載結束后，拿到該按鈕元素，然后設置其隱藏，或者直接去掉即可。
隱藏按鈕
$('.parameter-container-collapseimg-up').hide();
去掉按鈕
$('.parameter-container-collapseimg-up').remove();
三：示例
我們以GettingStarted.cpt模板為例，想要在模板展示的時候就隱藏參數界面的三角按鈕。
打開設計器，雙擊該模板，切換到參數面板編輯界面，單擊一下參數面板的空白處，選中參數面板，添加一個初始化后事件，如下圖：
四：js代碼如下：
setTimeout(function() {
$('.parameter-container-collapseimg-up').hide();
}, 10);
五：效果查看
保存模板，點擊預覽，即可看到三角按鈕不再顯示，如下圖：
參數控件賦值
一：概述
參數界面中，往往需要在一個控件中動態(tài)的控制其他控件的值，如下圖，當username有值時，state自動變?yōu)?，否則變?yōu)?:：
二：解決方案
可以通過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。
相關文章
建造者模式是設計模式的一種，將一個復雜對象的構建與它的表示分離，使得同樣的構建過程可以創(chuàng)建不同的表示。接下來通過本文給大家介紹JavaScript的設計模式經典之建造者模式，感興趣的朋友一起學習吧2016-02-02
CSS+Table圖文混排中實現(xiàn)文本自適應圖片寬度（超簡單+跨所有瀏覽器）
最近在為學樂網開發(fā)圖片顯示功能時遇到一個問題：在一個table中有兩行，上邊顯示圖片（大小隨機），下邊顯示對圖片的相關說明（文字長度隨機）2009-02-02
離開頁面時,檢測表單元素是否被修改,然后給出提示.防止用戶錯失修改的機會，提高用戶體驗。2010-08-08
用js調用迅雷下載代碼的二種方法，需要的朋友可以參考一下2013-04-04
上傳是個老生常談的話題了,多數情況下各位想必用的是uplodify,webUploader之類的插件,這篇文章主要給大家介紹了關于JavaScript圖片上傳并預覽的相關資料,需要的朋友可以參考下2022-01-01
數組如何求最大值,想必很多的朋友都不會吧,下面這篇文章主要給大家介紹了關于使用js求數組最大值的八種方法具體實現(xiàn)的相關資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了GoJs中標題和縮略圖使用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家詳細介紹了前端微信支付js代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
JavaScript中return返回多個值的三個方法實現(xiàn)
本文主要介紹了JavaScript中return返回多個值的三個方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
發(fā)兩個小東西，ASP/PHP 學習工具。 用JavaScript寫的
發(fā)兩個小東西，ASP/PHP 學習工具。 用JavaScript寫的...2007-04-04