Tutorial zur Datenanalysesoftware FineReport: [5] Parameterschnittstelle JS (vollständig)_Javascript-Kenntnisse

Bei der Verwendung von Berichtstools zum Entwerfen von Berichten und der Verwendung von Parametersteuerelementen möchten wir manchmal, dass einige Parametersteuerelemente nicht angezeigt werden, wenn die Bedingungen nicht erfüllt sind, und dann angezeigt werden, wenn die Bedingungen erfüllt sind. Als Nächstes werde ich Ihnen beibringen, wie das geht Es!

Wie Tabellenkalkulationssoftware steuert, ob Parametersteuerelemente basierend auf Bedingungen angezeigt werden

1: Problembeschreibung

Bei der Verwendung von Parametersteuerelementen hoffen wir manchmal, dass einige Parametersteuerelemente nicht angezeigt werden, wenn die Bedingungen nicht erfüllt sind, und dann angezeigt werden, nachdem die Bedingungen erfüllt sind, wie unten gezeigt: Erst nachdem der Inhalt in der vorherigen Dropdown-Liste ausgewählt wurde Im Dropdown-Feld wird das Dropdown-Feld-Steuerelement in der nächsten Ebene angezeigt:

Zwei: Lösung

Initialisieren Sie zunächst das kontrollierte Steuerelement so, dass es unsichtbar oder nicht verfügbar ist, fügen Sie dann das Bearbeitungsendereignis zum bedingten Steuerelement hinzu und stellen Sie das kontrollierte Steuerelement über das JS-Skript so ein, dass es sichtbar oder verfügbar ist. Die entsprechende JS-Methode lautet wie folgt:

setEnable(boolean): Legt fest, ob es verfügbar ist, true bedeutet verfügbar, false bedeutet nicht verfügbar;

setVisible(boolean): Legt fest, ob es sichtbar ist, true bedeutet sichtbar, false bedeutet unsichtbar

Drei: Beispiel

Öffnen Sie die Vorlage %FR_HOME%WebReportWEB-INFreportletsdocparameterMutiValue.cpt

Wir verwenden das Gebiet in dieser Vorlage als bedingte Kontrolle und die Provinz als kontrollierte Kontrolle, um den Einstellungsprozess zu veranschaulichen.

Viertens: Initialisieren Sie die kontrollierte Steuerung so, dass sie unsichtbar ist

Klicken Sie auf das Provinzsteuerelement, wählen Sie Attributtabelle > aus. Grundlegende Attribute werden angezeigt und überprüft, wie unten gezeigt:

5: Ereigniseinstellungen von bedingten Kontrollen

Fügen Sie ein Post-Edit-Ereignis zur Bereichskontrolle hinzu und rufen Sie die JS-Methode auf, um die Provinzkontrolle so festzulegen, dass sie sichtbar ist. Der spezifische Code lautet wie folgt:

Wählen Sie das Dropdown-Feld-Steuerelement des Parameterbereichs aus, wählen Sie den Ereignisbereich der Attributtabelle aus und fügen Sie ein Bearbeitungsendereignis hinzu, wie unten gezeigt:

Der Codeinhalt im Bild ist:

Der Code lautet:

.  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("请选择地区"); 

Datumskontrollüberprüfung JS

1: Übersicht

Einige Datenüberprüfungen können in der integrierten Parameterabfrageschnittstelle durchgeführt werden. Es gibt beispielsweise zwei Parameter: Startdatum und Enddatum. Als nächstes möchten wir Folgendes überprüfen: Das Startdatum und das Enddatum dürfen nicht leer sein. und das Enddatum muss innerhalb des Startdatums liegen. Das Nach- und Enddatum muss innerhalb eines bestimmten Zeitraums nach dem Startdatum liegen. Andernfalls werden relevante Informationen abgefragt, für die Sie der Abfrageschaltfläche Ereignisse hinzufügen können. Die spezifischen Einstellungen werden im Folgenden vorgestellt.

Die spezifischen Darstellungen sind wie folgt:

Schritte zum Lesen

Informationen zu bestimmten Fehlern finden Sie in der Fehlerwarnung im Rendering.

Zweitens: Öffnen Sie die Vorlage

Öffnen Sie die Vorlage: %FR_HOME%WebReportWEB-INFreportletsdocParameterTimeScaleTimeScale.cpt.

Die Parameterschnittstelle ist wie folgt:

Dritten: Ereignisse hinzufügen

Fügen Sie der Abfrageschaltfläche ein Klickereignis hinzu. Der spezifische JS-Code lautet wie folgt:

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

Hinweis: Obwohl die Überprüfung auch im Parametersteuerelement festgelegt werden kann, kann das Parametersteuerelement erst überprüft werden, wenn auf das Steuerelement geklickt wird. Daher darf die Parameterschnittstelle nicht leer sein und die Vergleichsüberprüfung muss in der Abfrageschaltfläche festgelegt werden.

Viertens: Effektansicht

Sehen Sie sich die Vorlage in Seiten an, wählen Sie die Start- und Endzeit aus und stellen Sie sicher, dass die Differenz zwischen den beiden Daten 15 Tage überschreitet. Das obige Dialogfeld wird angezeigt.

Hinweis: Der obige js-Code ist in Firefox, Google IE9 und anderen Browsern kein Problem, aber das Warnfeld zur Ermittlung der Differenz zwischen zwei Datumsangaben funktioniert in IE8 und IE-Browserversionen unter IE8 nicht. Folgende Codes stehen zur Verfügung:

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

Ce code est utilisé pour définir le paramètre state. Lorsque le nom d'utilisateur est vide, !username est vrai et l'état est défini sur 2. Sinon, lorsque le nom d'utilisateur a une valeur, l'état est défini sur 1.