データ分析ソフトウェア FineReport チュートリアル: [5] パラメータインターフェース JS (フル)_javascript スキル

レポート ツールを使用してレポートを設計し、パラメーター コントロールを使用する場合、条件が満たされていない場合は一部のパラメーター コントロールを表示せず、条件が満たされた後に表示されるようにしたい場合があります。次に、その方法を説明します。それ！

スプレッドシート ソフトウェアが条件に基づいてパラメーター コントロールを表示するかどうかを制御する方法

1: 問題の説明

パラメータ コントロールを使用する場合、以下に示すように、条件が満たされていない場合は一部のパラメータ コントロールが表示されず、条件が満たされた後に表示されるようにしたい場合があります: 前のドロップでコンテンツが選択された後のみダウン ボックスに、次のレイヤーのドロップダウン ボックス コントロールが表示されます:

2: 解決策

まず、制御対象コントロールを非表示または使用不可に初期化してから、条件付きコントロールに編集終了イベントを追加し、js スクリプトを通じて制御対象コントロールを表示または使用可能に設定します。 対応する js メソッドは次のとおりです。

setEnable(boolean): 利用可能かどうかを設定します。true は利用可能、false は利用不可を意味します。

setVisible(boolean): 表示されるかどうかを設定します。true は表示されることを意味し、false は非表示を意味します。

3: 例

テンプレート %FR_HOME%WebReportWEB-INFreportletsdocparameterMutiValue.cpt を開く

設定プロセスを説明するために、このテンプレートのエリアを条件付きコントロールとして使用し、県を制御対象コントロールとして使用します。

4: 制御対象のコントロールを初期化して非表示にします

州コントロールをクリックし、[属性テーブル] を選択すると、以下に示すように基本属性が表示され、チェックされます。

5: 条件付きコントロールのイベント設定

エリア コントロールにポストエディット イベントを追加し、JS メソッドを呼び出して州コントロールが表示されるように設定します。

以下に示すように、パラメーター領域のドロップダウン ボックス コントロールを選択し、属性テーブルのイベント パネルを選択して、編集終了イベントを追加します。

画像内のコードの内容は次のとおりです:

コードは次のとおりです:

.  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

1: 概要

一部のデータ検証は、組み込みパラメーター クエリ インターフェイスで実行できます。たとえば、開始日と終了日の 2 つのパラメーターがあります。次に確認したいのは、開始日と終了日を空にすることはできません。終了日は開始日の範囲内である必要があります。開始日以降の日付は開始日から一定期間内である必要があります。それ以外の場合は、クエリ ボタンにイベントを追加できる関連情報が表示されます。具体的な設定方法を以下に紹介します。

具体的なレンダリングは次のとおりです:

読む手順

特定のエラーについては、レンダリング内のエラー警告を参照してください。

2: テンプレートを開きます

テンプレート %FR_HOME%WebReportWEB-INFreportletsdocParameterTimeScaleTimeScale.cpt を開きます。

パラメータのインターフェースは以下のとおりです:

3: イベントを追加します

クエリ ボタンにクリック イベントを追加します。具体的な 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;
}

注: パラメータ コントロールでも検証を設定できますが、パラメータ コントロールはコントロールをクリックするまで検証できません。そのため、パラメータ インターフェイスを空にすることはできず、クエリ ボタンで比較検証を設定する必要があります。

4: エフェクトビュー

ページでテンプレートをプレビューし、開始時刻と終了時刻を選択し、2 つの日付の差が 15 日を超えるようにすると、上記のダイアログ ボックスが表示されます。

注: 上記の js コードは、Firefox、Google IE9、およびその他のブラウザーでは問題ありませんが、2 つの日付の違いを判断する警告ボックスは、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);
}

このコードは、username が空の場合、!username が true になり、state パラメーターを設定するために使用されます。それ以外の場合、username に値がある場合、state は 1 に設定されます。