JSによるカスタムボタンでのパラメータへの指定範囲値の迅速な設定- FineReport Help Document

作成者：ayuan0625

編集回数：23次

最終更新：ayuan0625 于 2025-11-07

一.概要

1.期待される効果

週報、月報、四半期報告、年報でパラメータクエリを行う際、毎回手動で選択する必要があるため、比較的に複雑になります。そのため、特定のボタンをクリックするだけで適切な時間範囲を正確に指定できる迅速なフィルタリング方法が必要です。以下の図のように：

効果一：システム時間に基づいて週報、月報、四半期報告、年報の範囲値を取得します。

未命名项目.gif

効果二：カスタム日付値に基づいて週報、月報、四半期報告、年報の範囲値を取得します。

未命名项目2.gif

2.実現の考え方

パラメータ欄にボタンを追加し、ボタンにJavaScriptの[クリック]イベントを追加して指定のパラメータに値を設定する方法で実現します。

二.例

1.例一

1.1帳票スタイルのデザイン

1）新しいワークブックを作成し、[テンプレート変数]start_timeとend_timeを追加します。以下の図のように：

图片1.png

2）B1セル、B2セルにそれぞれ次の数式を挿入します：$start_time、$end_time。帳票スタイルは以下の図のように：

图片2.png

1.2日付ウィジェットの追加

1）変数パネルに切り替え、2つの[ラベルウィジェット]を追加し、[ウィジェット値]をそれぞれ：「開始時間：」、「終了時間：」とします。以下の図のように：

图片3.png

2）2つの[日付ウィジェット]を追加し、[ウィジェット名]をそれぞれ：「start_time」、「end_time」とします。以下の図のように：

图片4.png

图片5.png

1.3ボタンウィジェットの追加

1）[ボタンウィジェット]を追加し、ボタン名を「今週」とします。以下の図のように：

图片6.png

2）今週の[ボタンウィジェット]に[クリック]イベントを追加します。以下の図のように：

图片7.png

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

今年の[ボタンウィジェット]のJavaScriptコードは以下の通りです：

//現在の日付が属する年の最初の日を取得
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）最後に[クエリ]ボタンを追加します。最終的な変数パネルのスタイルは以下の図のように：

图片8.png

1.4プレビュー効果

1）PC端末

テンプレートを保存し、[改ページプレビュー]をクリックします。システム時間に基づいて週報、月報、四半期報告、年報の範囲値を取得します。以下の図のように：

未命名项目.gif

2）モバイル端末

App端末及びHTML5の効果は以下の図のように：

2.例二

2.1日付ウィジェットの追加

1）新しいテンプレートを作成し、変数パネルに3つの[日付ウィジェット]を追加し、[ウィジェット名]をそれぞれRQ、B_TIME、E_TIMEとします。以下の図のように：

图片9.png

2）[日付ウィジェット]RQの[戻り値タイプ]を文字列に設定し、書式をyyyy-MM-ddに設定します。以下の図のように：

图片10.png

2.2ボタンウィジェットの追加

1）4つの[ボタンウィジェット]を追加し、それぞれに[クリック]イベントを追加します。以下の図のように：

图片11.png

週報の[ボタンウィジェット]のJavaScriptコードは以下の通りです：

注意：FR.remoteEvaluateインターフェースを使用すると一定のセキュリティリスクがあります。ユーザは実際の状況に応じて使用できます。

//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);

2）[クエリボタン]を追加します。最終的な変数パネルのスタイルは以下の図のように：

图片12.png