데이터 분석 소프트웨어 FineReport 튜토리얼: [5] 매개변수 인터페이스 JS(전체)_javascript 기술

보고서 도구를 사용하여 보고서를 디자인하고 매개변수 컨트롤을 사용할 때 조건이 충족되지 않을 때 일부 매개변수 컨트롤이 표시되지 않고 조건이 충족된 후에 표시되기를 원하는 경우가 있습니다. 다음으로 그 방법을 알려드리겠습니다. 그것!

스프레드시트 소프트웨어가 조건에 따라 매개변수 컨트롤 표시 여부를 제어하는 ​​방법

1: 문제 설명

매개변수 컨트롤을 사용할 때 아래와 같이 일부 매개변수 컨트롤이 조건이 충족되지 않을 때 표시되지 않고 조건이 충족된 후에 표시되기를 바라는 경우가 있습니다. 이전 드롭에서 콘텐츠를 선택한 후에만- 상자를 아래로 내리면 다음 레이어의 드롭다운 상자 컨트롤이 표시됩니다.

둘: 해결 방법

먼저 제어 컨트롤이 보이지 않거나 사용할 수 없도록 초기화한 다음 조건 컨트롤에 편집 종료 이벤트를 추가하고 js 스크립트를 통해 제어 컨트롤이 표시되거나 사용 가능하도록 설정합니다.

setEnable(boolean): 사용 가능 여부를 설정합니다. true는 사용 가능, false는 사용 불가능을 의미합니다.

setVisible(boolean): 표시 여부를 설정합니다. true는 표시됨, false는 표시되지 않음을 의미합니다.

3: 예

%FR_HOME%WebReportWEB-INFreportletsdocparameterMutiValue.cpt 템플릿 열기

설정 과정을 설명하기 위해 이 템플릿의 영역을 조건부 제어로, 지방을 제어 제어로 사용합니다.

넷째: 제어 컨트롤이 보이지 않도록 초기화

지방 컨트롤을 클릭하고 속성 테이블을 선택하면 아래와 같이 기본 속성이 표시되고 선택됩니다.

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: 개요

내장된 매개변수 쿼리 인터페이스에서 일부 데이터 확인을 수행할 수 있습니다. 예를 들어 시작 날짜와 종료 날짜라는 두 가지 매개변수가 있습니다. 다음으로 확인하려는 것은 시작 날짜와 종료 날짜가 비어 있을 수 없다는 것입니다. 종료 날짜는 시작 날짜 내에 있어야 합니다. 이후 날짜와 종료 날짜는 시작 날짜 이후의 특정 기간 내에 있어야 합니다. 그렇지 않으면 관련 정보가 표시되며 이에 대한 쿼리 버튼에 이벤트를 추가할 수 있습니다. 구체적인 설정은 아래에 소개되어 있습니다.

구체적인 렌더링은 다음과 같습니다.

읽는 단계

구체적인 오류는 렌더링의 오류 경고를 참조하세요.

둘째: 템플릿 열기

%FR_HOME%WebReportWEB-INFreportletsdocParameterTimeScaleTimeScale.cpt 템플릿을 엽니다.

매개변수 인터페이스는 아래와 같습니다.

세 번째: 이벤트 추가

쿼리 버튼에 클릭 이벤트를 추가합니다. 구체적인 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: 효과 보기

페이지 단위로 템플릿을 미리 보고, 시작 시간과 종료 시간을 선택하고, 두 날짜의 차이가 15일을 초과하도록 설정하면 위의 대화 상자가 나타납니다.

참고: 위의 js 코드는 Firefox, Google IE9 및 기타 브라우저에서는 문제가 없지만 두 날짜 간의 차이를 확인하는 경고 상자는 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이 true이고 상태는 2로 설정됩니다. 그렇지 않으면 사용자 이름에 값이 있으면 상태가 1로 설정됩니다.