类excel报表开发工具FineReport教程之表单设计1.描述不同于普通报表设计,表单设计拥有很多普通报表设计无法企及的优势,如下:整体性:普通报表是一个整体,无法实现局部刷新,表单是由各个组件组件,可以实现组件内刷新,即局部刷新;自适应:普通报表无法实现自适应,表单可以完美的实现自适应,更好的支持移动端的使用;控件:普通报表实现参数查询,只能将控件添加到参数面板中,表单不仅可以在参数面板中添加控件,同时还可以单独使用控件,实现数据的过滤;联动:普通报表中单元格或图表无法直接与单元格实现联动,表单却可以实现报表块或图表块与报表块的联动。
2.表单界面打开设计器,点击文件>新建表单,即可新建一张表单,如下图:表单各组件介绍请查看表单组件介绍。
3.表单设计步骤如下图,表单设计的一般操作步骤:新建表单:FineReport支持新建工作薄,即普通cpt模板,还支持新建表单,两种设计模式;拖入组件:FineReport表单支持多种不同的组件类型,包括报表、参数、图表和控件,后续详细介绍;定义数据集:定义各个组件数据来源,与普通模板的数据来源一样,图表组件数据即可来源于数据集,也可来源于单元格设置表单样式:即设置表单的显示样式,详细请查看表单样式表单组件介绍1.描述从上一节的表单设计整体界面可以看出,FineReport的表单设计组件由4部分组成:报表、参数、图表和控件,下面我们一一介绍各个组件的使用方法。
1.1报表报表块组件,可在该组件中绑定单元格数据,以表格的形式在组件范围内显示数据,报表块的具体设置模板与cpt模板一致,cpt模板的制作请参照报表,并且报表块中的数据可作为图表块的数据源。
1.2参数参数面板是指,为表单添加过滤参数面板,所有过滤控件全部添加在该面板上,也可以理解为参数面板时为了承载参数控件而存在的,其制作方式与参数查询类似。
1.3图表块图表块是指,可在该组件中选择任意FineReport支持的图表类型,图表块中所有图表的使用与统计图表的制作一致。
1.4控件控件是指过滤数据的组件,既可以作为组成部分添加到参数面板中,也可作为单独的组件添加到表单主体界面中,如果作为参数控件放在参数面板中,表单支持的控件类型与cpt 模板支持的控件类型基本一致。
详细请参照控件。
注:表单不支持网页框控件。
如下图,表单中添加了所有的组件,帮助大家理解各个组件的含义:表单入门示例1.描述下面我们以一个简单的示例来体会体会一下表单。
最终效果如下:2.操作步骤2.1新建表单点击文件>新建表单,如下图:2.2拖入组件如上图所示的效果图,我们可以看到该表单需要有1个下拉框控件以及对应的1个标签控件和一个查询按钮,还需要一个以表格形式显示数据的报表块和显示图表的图表块,此时,我们确定了需要在表单中添加一个报表块,一个图表块,3个控件。
注:在组件介绍中,我们知道控件即可依附于参数面板组件存在,也可以单独以组件的形式存在,在这里可随意使用哪种形式,效果都一样,那么使用依附于参数面板组件存在的形式。
参数组件从工具栏中将参数组件拖拽至表单主体中,并将相应的三个控件:下拉框、文本控件和查询按钮拖拽至参数组件中,并设置标签控件的控件值为:客户,如下图:报表块组件从工具栏中将报表组件也拖拽至表单主体中,如下图:注:如果组件数量过多,在web端展示的时候自适应在一页内显示会比较拥挤,那么此时可以在右侧下方选中整体框架body,在右侧上方的属性表中将组件缩放修改为自适应原样缩放,如下图:充满展现区域:是指在web端展示的时候,所有组件自适应充满整个浏览器页面显示,不出现滚动条;自适应原样缩放:是指在web端展示的时候根据制作表单时候组件大小比例显示,并不缩放充满整个web页面,如果超过页面大小,会出现滚动条。
其详细显示样式请查看表单样式∙图表组件再从工具栏中将图表组件拖曳至报表块组件的下方,如下图:2.3控件绑定数据∙定义数据集效果图中,新建数据集ds1:SELECT产品名称,库存量,产品.成本价,产品.单价FROM 订单,订单明细,产品where客户ID='${company}'and订单.订单ID=订单明细.订单ID and订单明细.产品ID=产品.产品ID,参数company的默认值为VINET,。
注:参数名字必须与客户ID下拉框控件名称保持一致。
客户下拉框控件选中下拉框控件拖拽到适当位置,下拉框控件名设为“company”,数据字典来自FRDemo数据库的客户表(数据类型选择数据库表,数据库选择FRDemo),实际值和显示值分别为客户ID和客户名称,控件值为VINET:注:查询按钮必须是预定义好的查询按钮。
2.4报表块参数面板与控件都已经设置好之后,点开报表块里面的触笔按钮,进行报表块编辑界面,如下图:∙新建数据集效果图中,报表块里面要显示订单明细数据,根据客户ID进行过滤,新建数据集ds2:select*from订单where客户ID='${company}',company默认值为VINET.∙表样设计如下图所示,设计表样:点击左下角的表单按钮回到表单的设计界面,选中报表块,可在右侧的属性表中设置其报表块工具栏是否可见,如下图:注:报表块工具栏默认不显示,如果要显示即勾选即可,不显示工具栏,则如果数据有分页,是无法显示分页按钮的,即,只有勾选了报表块工具栏选项才能使用分页按钮,才可以查看第二页以后的数据。
2.5图表块鼠标选中图表块所在区域,为该图表绑定数据,图表数据源来源于数据集数据源,其分类系列设置如下:图表数据源的设置与普通报表的图表数据源设置过程一样,这里不再赘述。
条件属性由于该图表块类型为组合图,即需要通过图表条件属性来修改不同系列的图表类型,如下图,新增一个条件属性,设置当系列序号为3的时候,其坐标轴为次坐标轴,图表类型为折线图:注:设置条件选择系列序号的时候需要与数据绑定时的数据列顺序相匹配,在上图设置图表数据时,库存量、成本价和单价的系列序号依次为1、2、3,条件属性主要是设置库存量系列用柱形图展示,成本价和单价用折线图展示并使用次坐标轴。
在添加一个组合图时,会默认添加2个条件属性,详细请查看组合图到此为止,表单就已经制作好了。
3.保存表单并预览保存表单,表单模板后缀名为.frm,点击按钮进行预览,即可看到效果。
已完成表单请查看%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Frm\examle.frm 模板在线查看请点击examle.frm表单数据源1.描述FineReport表单通过组件展示数据,那么表单数据来自于哪里呢?下面我们介绍一下表单数据源。
表单数据源类似于图表数据源,图表数据源可分为数据集数据源和单元格数据源,数据集数据即直接来源于数据集,单元格数据源数据来源于报表的单元格,对于表单来说,那么其单元格数据源就是指来源于当前表单的报表块里面的单元格,下面我们详细介绍这两种数据源的使用方法。
在上一节中我们介绍了表单的组件,其中报表块、图表块和控件这三种组件是需要绑定数据的,那么该三种控件就可使用数据集数据源和单元格数据源,下面我们以图表块为例来讲述这两种数据源的使用方式。
2.数据集数据源数据集数据源是指直接从数据集中取数,在组件中展示,其使用方式与图表数据集数据源的设置方式一致,直接为组件绑定数据集数据即可,无需手动输入,直接选择,如下图,上一节中的示例使用的就是数据集数据源,这里就不再详细介绍:3.单元格数据源单元格数据源是指数据从单元格中获取,并用于组件展示,在表单中,单元格特指报表块里面的单元格。
3.1模板准备打开模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Frm\examle.frm,我们将数据集ds1修改为:SELECT订单.订单ID,订购日期,产品名称,库存量,产品.成本价,产品.单价FROM订单,订单明细,产品where客户ID='${company}'and订单.订单ID=订单明细.订单ID and订单明细.产品ID=产品.产品ID,报表块里面的内容修改为如下图所示样式:3.2单元格数据集选中图表组件,将其图表数据修改为单元格数据集,其数据来源于上面报表块里面的内容,分类轴为B3单元格,系列值分别为C3、D3和E3,如下图:图表数据来源于报表块中的单元格,可以使用report~A2这种形式调用指定单元格中的数据,比如说分类轴为报表块中的产品名称所在单元格B3,报表块名称为report0,故可以用report0~B3来调用产品名称,又比如说系列值为C3单元格的库存量,故系列值可以使用report0~C3来调用。
注:如果想获取多个单元格在数据可以使用公式report0~A1:A4这种形式,该公式返回数据为数组即可,比如说,上图的单元格数据源配置的系列名也可以从单元格中获取,就可以使用该公式,如下图:3.3效果查看保存模板,点击预览,可以看到如下图所示效果,组合图从单元格中取出来了数据并用于分析展示:表单样式1.描述为了让模板更加美观。
FineReport提供了各种不同的样式设置方法来满足用户对模板的美观要求。
表单样式设计分为两种:表单组件样式设计和表单框架样式设计。
表单组件样式:表单组件样式根据组件的不同,其样式设置有细小差别,详细请查看报表块样式、图表块样式、参数面板样式和控件样式表单框架样式:表单所有组件放置在同一个框架下,可对该框架进行一定的样式设计,详细请查看表单框架样式报表块样式1.描述报表块样式设计包括报表块组件样式的设计和报表块内容样式的设计,其中报表块内容的样式设计即报表的样式设计,下面我们着重讲解报表块组件样式的设计。
打开表单%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Frm\examle.frm 鼠标选中该表单模板中报表块,在右侧上方属性面板中即可对报表块进行样式设计,如下图,包括样式、内边距和报表块工具栏的设计:1.1样式点击样式后面的按钮,弹出框架设置对话框,如下图:比如说,我们为该表单的报表块设置边框,添加背景色和标题,如下图:保存模板,点击预览按钮,即可在web端看到如下图所示的效果:1.2内边距内边距是指报表主体内容距离报表块边缘的距离,如果有边框,即距离边框的具体,如下图所示设置边距大小:点击预览按钮,如下图所示效果:1.3报表块工具栏大家知道,在制作cpt模板的时候,有工具栏选项,即在web端预览模板的时候的顶部按钮工具栏,勾选报表工具栏,即可将顶部工具栏显示在报表块里面,如下图:注:表单中报表块才有工具栏,且其工具栏只有翻页按钮。