JS實現自訂按鈕快速給參數賦指定範圍值- FineReport帮助文档

1. 概述

1.1 預期效果

週報、月報、季報、年報中有參數查詢時，每次都需要手動選擇，比較繁瑣，所以就需要一種快速篩選的方法，只需點選某個按鈕，就能準確定位到合適的時間範圍，如下圖所示：

效果一：根據系統時間獲取週報、月報、季報、年報範圍值

效果二：根據自訂日期值獲取週報、月報、季報、年報範圍值

1.2 實現思路

透過在參數欄新增按鈕，在按鈕上新增 JavaScript「點選」事件給指定參數指派的方法來實現。

2. 範例

2.1 範例一

2.1.1 設計報表樣式

1）建立一個工作簿，新增「範本參數」start_time和end_time ，如下圖所示：

2）在 B1、B2 儲存格分別插入公式：$start_time、$end_time，報表樣式如下圖所示：

2.1.2 新增日期元件

1）切換至參數面板，新增兩個「標籤元件」，元件值分別為：開始時間：、結束時間：，如下圖所示：

2）新增兩個「日期元件」，元件名稱分別為：start_time、end_time，如下圖所示：

2.1.3 新增按鈕元件

1）新增一個「按鈕元件」，按鈕名稱為本週，如下圖所示：

2）為本週「按鈕元件」新增「點選」事件，如下圖所示：

JavaScript 程式碼如下：

//獲取當前日期所在週的第一天
var K1='${=dateInWeek(TODAY(),1)}'; //獲取當前日期所在週的最後一天  
var K2='${=dateInWeek(TODAY(),-1)}'; //獲取元件（開始時間）
var state1= this.options.form.getWidgetByName("start_time");//獲取元件（結束時間）
var state2= this.options.form.getWidgetByName("end_time");//給元件（開始時間）賦值
state1.setValue(K1);
//給元件（結束時間）賦值
state2.setValue(K2);

3）同上述方法新增本月「按鈕元件」、本季「按鈕元件」、本年「按鈕元件」，並分別為其新增「點選」事件。

本月「按鈕元件」JavaScript 程式碼如下：

//獲取當前日期所在月份的第一天
var K1='${=DATEINMONTH(TODAY(),1)}';   
//獲取當前日期所在月份的最後一天  
var K2='${=DATEINMONTH(TODAY(),-1)}'; 
//獲取元件（開始時間）
var state1= this.options.form.getWidgetByName("start_time");
//獲取元件（結束時間）
var state2= this.options.form.getWidgetByName("end_time");
//給元件（開始時間）指派
state1.setValue(K1);
//給元件（結束時間）指派
state2.setValue(K2);显示代码

本季「按鈕元件」JavaScript 程式碼如下：

//獲取當前日期所在季度的第一天 
var K1='${=dateINQUARTER(TODAY(),1)}'; 
//獲取當前日期所在季度的最後一天 
var K2='${=dateINQUARTER(TODAY(),-1)}'; 
//獲取元件（開始時間） 
var state1= this.options.form.getWidgetByName("start_time"); 
//獲取元件（結束時間） 
var state2= this.options.form.getWidgetByName("end_time"); 
//給元件（開始時間）指派 
state1.setValue(K1); 
//給元件（結束時間）指派 
state2.setValue(K2);显示代码

本年「按鈕元件」avaScript 程式碼如下：

//獲取當前日期所在年份的第一天
var K1='${=DATEINYEAR(TODAY(),1)}';   
//獲取當前日期所在年份的最後一天  
var K2='${=DATEINYEAR(TODAY(),-1)}'; 
//獲取元件（開始時間）
var state1= this.options.form.getWidgetByName("start_time");
//獲取元件（結束時間）
var state2= this.options.form.getWidgetByName("end_time");
//給元件（開始時間）指派
state1.setValue(K1);
//給元件（結束時間）指派
state2.setValue(K2);显示代码

4）最後新增一個「查詢」按鈕，最終參數面板樣式如下圖所示：

2.1.4 預覽效果

1）PC 端

儲存範本，點選「分頁預覽」，根據系統時間獲取週報、月報、季報、年報範圍值，如下圖所示：

2）行動端

App 及 HTML5 效果如下圖所示：

2.2 範例二

2.2.1 新增日期元件

1）建立範本，在參數面板增加三個「日期元件」，元件名分別為：RQ、B_TIME、E_TIME，如下圖所示：

2）將日期元件 RQ 的傳回類型設定成：字串，格式設為：yyyy-MM-dd。如下圖所示：

2.2.2 新增按鈕元件

1）新增 4 個「按鈕元件」，並分別為其新增「點選」事件，如下圖所示：

週報「按鈕元件」JavaScript 程式碼如下：

注：使用 FR.remoteEvaluate API存在一定安全風險，使用者可根據實際情況使用，詳情可查看：全局API-FR

//獲取到 RQ 元件值，並指派給參數 RQ
var RQ=this.options.form.getWidgetByName("RQ").getValue();
//獲取參數 RQ 所在週的第一天，並指派給參數s
var s=FR.remoteEvaluate('FORMAT(DATEINWEEK("'+RQ+'",1),"yyyy-MM-dd")');
//獲取參數 RQ 所在週的最後一天，並指派給參數e
var e=FR.remoteEvaluate('FORMAT(DATEINWEEK("'+RQ+'",-1),"yyyy-MM-dd")');
//給元件 B_TIME 指派
this.options.form.getWidgetByName("B_TIME").setValue(s);
//給元件 E_TIME 指派
this.options.form.getWidgetByName("E_TIME").setValue(e);显示代码

月報「按鈕元件」JavaScript 程式碼如下：

var RQ=this.options.form.getWidgetByName("RQ").getValue();
var s=FR.remoteEvaluate('FORMAT(DATEINMONTH("'+RQ+'",1),"yyyy-MM-dd")');
var e=FR.remoteEvaluate('FORMAT(DATEINMONTH("'+RQ+'",-1),"yyyy-MM-dd")');
this.options.form.getWidgetByName("B_TIME").setValue(s);
this.options.form.getWidgetByName("E_TIME").setValue(e);

季報「按鈕元件」JavaScript程式碼如下：

var RQ=this.options.form.getWidgetByName("RQ").getValue();  
var s=FR.remoteEvaluate('FORMAT(DATEINQUARTER("'+RQ+'",1),"yyyy-MM-dd")');  
var e=FR.remoteEvaluate('FORMAT(DATEINQUARTER("'+RQ+'",-1),"yyyy-MM-dd")');  
this.options.form.getWidgetByName("B_TIME").setValue(s);  
this.options.form.getWidgetByName("E_TIME").setValue(e);

年報「按鈕元件」JavaScript 程式碼如下：

var RQ=this.options.form.getWidgetByName("RQ").getValue();
var s=FR.remoteEvaluate('FORMAT(DATEINYEAR("'+RQ+'",1),"yyyy-MM-dd")');
var e=FR.remoteEvaluate('FORMAT(DATEINYEAR("'+RQ+'",-1),"yyyy-MM-dd")');
this.options.form.getWidgetByName("B_TIME").setValue(s);
this.options.form.getWidgetByName("E_TIME").setValue(e);