JS實現日期元件查詢天數控制- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 版本

報表伺服器版本	功能變更
11.0	-
11.0.11	APP、H5 升級至 11.0.76 及以後版本，支援行動端

1.2 應用場景

使用者希望查詢報表時選擇結束時間後，開始時間自動選擇為結束時間的前一個月，開始時間為空、結束時間為空、開始時間大於結束時間或兩者相差超過 30 天時出現相關提示並阻止查詢，如下圖所示：

1.3 實現思路

1）設定兩個資料集參數「start_time」、「end_time」並新增到參數面板綁定日期元件。「start_time」元件值設定為公式，「end_time」元件值設定為日期。

2）為查詢按鈕新增點選事件，利用 JS 獲取日期元件值，判斷開始時間是否為空、結束時間是否為空、開始時間是否大於結束時間、兩者相差是否超過 30 天，滿足條件則彈出提示並阻止查詢。

注：API說明詳情參見元件通用。

2. 範例

2.1 準備資料

1）開啟 FineReport 設計器，點選菜單欄「檔案>建立普通報表」建立一張普通報表，如下圖所示：

2）點選資料集管理面板的「+」按鈕，選擇「資料庫查詢」，建立資料集 ds1 ，SQL 查詢語句為：

SELECT * FROM 訂單 where 1=1

${if(len(start_time)=0,""," and 訂購日期>='"+start_time+"'")}

${if(len(end_time)=0,""," and 訂購日期<='"+end_time+"'")}

2.2 設計報表

1）進入報表設計介面， A1-E1 儲存格分別輸入正文內容，資料集管理面板的 ds1 中的部分資料列拖入 A2-E2 儲存格，如下圖所示：

2）選中 A1-E2 儲存格，設定為「置中」，點選「邊框」按鈕，選擇「所有框線」，如下圖所示：

2.3 設定參數面板

1）點選參數面板的參數編輯按鈕，點選「全部新增」將參數「start_time」、「end_time」新增到參數面板中，如下圖所示：

2）分別點選參數面板中參數「start_time」、「end_time」的工具按鈕綁定日期元件，如下圖所示：

3）點選右側的「元件設定」按鈕，選擇「start_time」，選擇下方的「屬性」。

4）元件值選擇「公式」，輸入公式：monthdelta($end_time,-1)，即設定 end_time 日期之後，start_time 日期為 end_time 日期前一個月，點選「確定」，如下圖所示：

5）繼續點選右側的「元件設定」按鈕，選擇「end_time」，選擇下方的「屬性」。

6）元件值選擇「日期」，設定預設日期為「2010-03-16」，如下圖所示：

7）繼續點選右側的「元件設定」按鈕，選擇「Search」，選擇下方的「事件」。

8）點選「+」按鈕，選擇「點選」，設定點選事件，如下圖所示：

JavaScript 程式碼如下：

var start =_g().getParameterContainer().getWidgetByName("start_time").getValue(); 
//獲取start_time元件的值
var end = _g().getParameterContainer().getWidgetByName("end_time").getValue(); 
//獲取end_time元件的值 
if (start > end) {
	alert("開始時間不能大於結束時間!");
	//如果開始時間大於結束時間則提示
	return false;
	//阻止查詢
}
var subdate = (new Date(end) - new Date(start)) / (1000 * 60 * 60 * 24); 
//將開始時間和結束時間相減得出的毫秒數轉化為天數
if (subdate > 30) {
	alert("開始時間和結束時間相差不能大於30天!");
	//如果開始時間和結束時間差了30天以上則提示
	return false;
	//阻止查詢
}