数据分析软件之FineReport教程:[5]参数界面JS(全)

在用报表工具设计报表时,使用参数控件时,有时我们希望部分参数控件在没满足条件时不显示,满足条件后再显示,接下来我就来教教大家怎么做!

表格软件如何根据条件控制参数控件是否显示

一:问题描述

在使用参数控件时,有时我们希望部分参数控件在没满足条件时不显示,满足条件后再显示,如下图效果:只有前面的下拉款选择了内容之后,后一层下拉框控件才显示出来:

二:解决方案

首先将被控制的控件初始化为不可见或者不可用,然后在条件控件上增加编辑结束事件,通过js脚本设置被控制控件可见或可用,对应的js方法如下:

setEnable(boolean):设置是否可用,true为可用,false为不可用;

setVisible(boolean):设置是否可见,true为可见,false为不可见;

三:示例

打开模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\parameter\MutiValue.cpt

我们用这个模板中的area作为条件控件,province作为被控控件来说明设置过程。

四:初始化被控控件为不可见

点击province控件,选择属性表>基本属性将可见勾选掉,如下图:

五:条件控件的事件设置

给area控件添加编辑后事件,调用JS方法将province控件设定为可见,具体的代码如下:

选择参数area的下拉框控件,选择属性表的事件面板,增加一个编辑结束事件,如下图:

图中的代码内容是:

其中代码为:

.  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

一:概述

内置参数查询界面当中可进行一些数据校验,例如有两个参数:开始日期和结束日期,下面我们要校验的是:开始日期与结束日期不能为空,结束日期必须在开始日期之后以及结束日期必须在开始日期后的某个时间段内,否则提示相关信息,对此可以在查询按钮中增加事件。下面介绍下具体的设置。

具体效果图如下:

步骤阅读

具体错误见效果图报错警告。

二:打开模板

打开模板:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.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;
}

注:虽然参数控件中也可以设置校验,但是参数控件要点击控件后才能进行校验,因此参数界面的不能为空以及比较校验需要在查询按钮中设置。

四:效果查看

分页预览模板,选择开始时间和结束时间,使这两个日期之间相差超过15天,就会弹出上述对话框。

注:上述js代码在火狐,谷歌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);
}

该段代码是用来对state参数置数,当username为空时,!username为真,此时将state置数为2,否则当username有值时,将state置数为1。

(0)

相关推荐

  • Java FineReport报表工具导出EXCEL的四种方式

    在实际的应用中会经常需要将数据导出成excel,导出的方式除原样导出还有分页导出.分页分sheet导出和大数据量导出.对于excel2003版,限制了每个sheet的最大行数和列数,大数据量导出时会默认时分多个sheet,而excel2007不会出现这样的问题.这些导出方式在JAVA程序中分别有不同的接口来实现: 1. 原样导出 原样导出就是不预览直接导出excel 其程序接口代码如下: outputStream = new FileOutputStream(new File("E:\\Exce

  • 解析如何开发FineReport的自定义控件

    FineReport作为插件化开发的报表软件,有些特殊需求的功能需要自己开发,开发的插件包帆软官方有提提供,可以去帆软论坛上找,本文将主要介绍如何开发一个自定义控件,这里讲讲方法论. 第一步:实例化一个注册控件的接口 给四个信息 我们的控件类,界面类,图标路径,控件类型名字 package com.hg.free.plugin.customcombo.param; import com.fr.design.designer.creator.XComboBox; import com.fr.des

  • 数据分析软件之FineReport教程:[5]参数界面JS(全)

    在用报表工具设计报表时,使用参数控件时,有时我们希望部分参数控件在没满足条件时不显示,满足条件后再显示,接下来我就来教教大家怎么做! 表格软件如何根据条件控制参数控件是否显示 一:问题描述 在使用参数控件时,有时我们希望部分参数控件在没满足条件时不显示,满足条件后再显示,如下图效果:只有前面的下拉款选择了内容之后,后一层下拉框控件才显示出来: 二:解决方案 首先将被控制的控件初始化为不可见或者不可用,然后在条件控件上增加编辑结束事件,通过js脚本设置被控制控件可见或可用,对应的js方法如下: s

  • FineReport中自定义登录界面的方法

    FineReport报表软件是一款纯Java编写的.集数据展示(报表)和数据录入(表单)功能于一身的企业级web报表工具,它"专业.简捷.灵活"的特点和无码理念,仅需简单的拖拽操作便可以设计复杂的中国式报表,搭建数据决策分析系统. 在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. 自定义登录界面 1)登录界面设置 自定义html登录页面:

  • 使用pandas读取表格数据并进行单行数据拼接的详细教程

    业务需求 一个几十万条数据的Excel表格,现在需要拼接其中某一列的全部数据为一个字符串,例如下面简短的几行表格数据: id code price num 11 22 33 44 22 33 44 55 33 44 55 66 44 55 66 77 55 66 77 88 66 77 88 99 现在需要将code的这一列用逗号,拼接为字符串,并且每个单元格数据都用单引号包含,需要拼接成字符串'22','33','44','55','66','77',这样的情况,我们需要怎么处理呢?当然方式有

  • Docker容器数据卷的使用教程

    目录 前言 1.数据卷概念 2.数据卷作用 3.配置数据卷 4.多容器进行数据交换 5.数据卷容器 6.数据卷小结 总结 前言 本文是 Docker 容器的数据卷使用的简单教程,介绍了什么是数据卷.数据卷概念.以及如何使用数据卷等. 1.数据卷概念 数据卷简单来讲就是一个目录,它是由Docker daemon 挂载到容器中的,因此数据卷并不属于联合文件系统,也就是说数据卷里面的内容不会因为容器的删除而丢失.Docker启动后,容器内的文件和宿主机是隔离的,如果不使用docker commit 操

  • 详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)

    一:图形界面安装 1.打开Anconda 2.点击Environment 3. 将Installed点击为Not installed 4. 搜索django,勾选django之后点击绿色标识 5.点击Apply然后等待安装完成. 二.命令行(程序员都是这么搞的) 1.直接同时按Windows+R 2. 输入cmd,点击确定 3.输入pip install django执行 4.等待安装完成. 三.pycharm安装: 1.在项目中点击File中打开设置 2. 点击右侧+号,搜索django并安装

  • keras Lambda自定义层实现数据的切片方式,Lambda传参数

    1.代码如下: import numpy as np from keras.models import Sequential from keras.layers import Dense, Activation,Reshape from keras.layers import merge from keras.utils.visualize_util import plot from keras.layers import Input, Lambda from keras.models impo

  • Android编程之界面实现全屏显示的方法(2种方法)

    本文实例讲述了Android编程之界面实现全屏显示的方法.分享给大家供大家参考,具体如下: 在开发android的应用当中,我们会遇到将一些界面设置为全屏显示的格式,有两种实现的方法.其一是在Java代码中实现,其二是在配置文件中实现. 1. 在Java代码中设置 super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); //无title getWindow().setFlags(Wind

  • 在Python3中使用asyncio库进行快速数据抓取的教程

    web数据抓取是一个经常在python的讨论中出现的主题.有很多方法可以用来进行web数据抓取,然而其中好像并没有一个最好的办法.有一些如scrapy这样十分成熟的框架,更多的则是像mechanize这样的轻量级库.DIY自己的解决方案同样十分流行:你可以使用requests.beautifulsoup或者pyquery来实现. 方法如此多样的原因在于,数据"抓取"实际上包括很多问题:你不需要使用相同的工具从成千上万的页面中抓取数据,同时使一些Web工作流自动化(例如填一些表单然后取回

  • MySQL的源码安装及使用UDFs进行数据自动更新的教程

    MySQL的源码安装 1. 安装依赖组件 # yum install gcc gcc-c++ ncurses-devel perl -y 2. 安装cmake # wget http://www.cmake.org/files/v2.8/cmake-2.8.12.tar.gz # tar zxvf cmake-2.8.12.tar.gz # cd cmake-2.8.12 # ./bootstrap # make && make install 3. 安装bison # wget http

  • Oracle 10g利用amdu抽取数据文件的方法教程

    前言 本文主要给大家介绍的是关于Oracle 10g利用amdu抽取数据文件的相关内容,下面话不多说了,来一起看看详细的介绍吧 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 需求:实验在Oracle 10g环境使用amdu抽取数据库文件 本文主要目的是介绍3个知识点: 1.使amdu可以在oracle 10g环境中使用 2.使kfed可以在oracle 10g环境中使用 3.amdu如何抽取损坏的ASM磁盘组数据 1.使amdu可以在oracle 10g环境中使用 在Orac

随机推荐