レポート ツールを使用してレポートを設計し、パラメーター コントロールを使用する場合、条件が満たされていない場合は一部のパラメーター コントロールを表示せず、条件が満たされた後に表示されるようにしたい場合があります。次に、その方法を説明します。それ！
スプレッドシート ソフトウェアが条件に基づいてパラメーター コントロールを表示するかどうかを制御する方法
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: イベントを追加します
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 に設定されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
