历史版本42 :填报功能入门示例 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 功能简介

填报功能可以将页面数据写入到数据库,包括数据的增加、删除和修改操作。同时也支持对填写数据的自定义校验,excel 导入数据,根据填写值智能联动等功能。本文主要以简单的行式填报报表为例讲解如何使用 FineReport 设计器设计出一张简单的填报报表。

1.2 预期效果

1)新增数据:

填报预览时,选中某一行数据,点击增加记录按钮,在这行数据后面新增一行数据。

Snag_8743c11.png

2)修改数据:

填报预览时,选中某一行数据,修改其中数据列的信息。

Snag_86fec10.png

3)删除数据:

填报预览时,选中某一行数据,点击删除列行按钮,将这一行数据直接删除。

Snag_87300e1.png

2. 制作步骤编辑

2.1 数据准备

新建数据集 ds1,数据库查询对话框中写入 SQL 查询语句:SELECT * FROM S产品 ORDER BY 产品ID LIMIT 5,取出「S产品」表中按「产品ID」排序后的前五条数据。

[helpvideo]2384[/helpvideo]

2.2 报表设计

1)A1~I1 单元格写入表格标题信息,并将数据集中的相关数据列按照标题字段依次拖入到 A2~I2 单元格。

2)模板主题选择「兼容主题」,设置表格的标题样式为「预定义样式>Head」,表格主体字体设置为「居中」,并添加天蓝色内外框。

[helpvideo]2385[/helpvideo]

2.4 添加填报控件

给单元格添加录入数据的控件,若不设置录入数据的控件将无法实现填报功能,您可以根据实际应用场景选择填报的控件类型,本文以文本控件为例。

选中 A2~I2 单元格,右边属性面板选择「控件设置」,选择控件下拉框选择「文本控件」。

需根据实际应用场景进行设置:

  • 如果只想向数据库提交自定义的数据,则无需将数据列拖入 A2~I2 ,可直接在空白单元格上添加填报控件。

  • 如果想要将数据集中的数据提交入库,而没有修改和新增数据的需求,可以将数据列拖入单元格,无需添加填报控件。

[helpvideo]2386[/helpvideo]

2.5 设置填报属性

设置填报属性的目的:将需要录入数据所在的单元格跟数据库表中的字段对应起来,从而确定某个单元格中录入的数据该写入到哪个数据库表下的哪个字段中。

1)菜单栏选择「模板>报表填报属性」,打开「报表填报属性」设置对话框。

2)在对话框中选择「提交」,点击Snag_136208e2.png,选择「内置SQL」的数据提交方法。选择提交类型为「智能提交」,数据库为「FRDemo」,表为「S产品」 。

3)选择「智能添加字段」确定可以进行填报的字段,然后选择「智能添加单元格」功能将单元格与数据库表中的数据列绑定起来,勾选「产品ID」为「主键」,详细添加方式可参考:内置SQL提交。勾选「 未修改不更新」,点击「确定」,即完成报表填报属性的设置。

注1:勾选了「未修改不更新」后,进行填报时,页面上未修改的数据不会参与提交,具体介绍可参考:填报未修改不更新

注2:如果涉及到修改或删除需求,那么必须勾选一个或多个主键,这里的主键相当于 SQL 中 where 的效果,不同于数据库的主键。

[helpvideo]2387[/helpvideo]

2.6 设置模板 Web 属性

设置模板 Web 属性的目的是为了自定义填报预览的页面,包括工具栏、报表显示位置、标签页显示位置等等。

注:设置模板 Web 属性不是填报模板制作的必要流程,也可直接使用默认的 Web 属性设置。

1)菜单栏选择「模板>模板Web属性」,打开模板 Web 属性设置对话框。

2)模板 Web 属性设置对话框中选择「填报页面设置」,选中「为该模板单独设置」填报页面的 Web 属性。勾选「填报当前编辑行背景设置」,设置其背景色为绿色。点击按钮,删除默认的顶部工具栏,从下方的工具库中通过双击的方式将控件添加到顶部工具栏,本示例中添加的四个自定义控件分别为:「提交」、「数据校验」、「插入记录」、「删除记录」。其余选项采用默认设置,点击「确定」,即完成填报预览页面属性的设置。

[helpvideo]2388[/helpvideo]

3. 效果预览编辑

3.1 PC端

1)点击「保存」按钮,保存报表。选择「填报预览」查看报表,如下图所示:

Snag_97da10b.png

2)新增数据:

C89B41AD-BFCB-4F18-996C-D4C35637D1D0.GIF

3)修改数据:

C493F58A-C8F2-4F86-8C75-85F8D19CFED8.GIF

4)删除数据:

D688603D-42A2-4237-AAC7-1202D5BAF0AF.GIF

3.2 移动端

移动端查看报表的方式参见:报表移动端预览

移动端预览时,不会显示填报工具栏,所以示例报表在移动端填报预览时,不能新增和删除数据,只能修改数据。如果想在移动端实现新增和删除效果,可在报表设计时添加「插入删除行」按钮,设置方法参见文档:插入删除行

Screenshot_20190905_161425_com.finereact.v10.jpg

4. 已完成模板编辑

已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\行式填报报表.cpt

点击下载模板:行式填报报表.cpt