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

目录:

1. 描述编辑

在线视频学习请查:行式填报报表

行式填报报表采用行式报表的样式,数据按行新增、修改和删除。

2. 示例编辑

2.1 示例效果

1)新增数据:

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

Snag_8743c11.png

2)修改数据:

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

Snag_86fec10.png

3)删除数据:

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

Snag_87300e1.png

2.2 数据准备

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

Snag_88fc40a.png

2.3 报表设计

1)A1~I1 单元格写入表格标题信息,选中 A1~I1 单元格,右边属性面板选择单元格属性>样式,样式下拉框选择预定义样式,给标题设置一个Head类型的样式。

注:设置好 Head 类型的样式后,标题字体会自动居中,无需另外设置。

Snag_8a78a58.png

2)将数据集中的相关数据列按照标题字段依次拖入到 A2~I2 单元格,选中 A2~I2 单元格,将字体居中。选中 A1~I2 单元格,给表格整体添加预定义样式默认的天蓝色内外框。

Snag_8aad388.png

2.4 添加填报控件

给单元格添加录入数据的控件,根据您的实际应用场景选择填报的控件类型,这边以文本控件为例。

选中 A2~I2 单元格,右边属性面板选择控件设置,选择控件下拉框选择文本控件。根据实际应用场景设置控件属性。

注:如果只想新增数据,不需要查看已有数据,可以不用新建数据集,直接给 A2~I2 空白单元格添加填报控件。

Snag_8b5091e.png

2.5 设置填报属性

设置填报属性的目的是为了将需要录入数据的单元格跟数据库表中的字段对应起来,确定这个单元格中录入的数据该写入到哪个数据库表下的哪个字段中。

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

Snag_9140622.png

2)报表填报属性设置对话框选择提交,点击Snag_136208e2.png,新增一个内置SQL的数据提交方法。选择提交类型为智能提交,数据库为FRDemo,表为S产品,先后通过智能添加字段智能添加单元格功能将单元格与数据库表中的数据列绑定起来,勾选「产品ID」为主键。勾选未修改不更新,点击确定,即完成报表填报属性的设置。

注1:智能添加字段智能添加单元格的功能及操作在视频中有详细介绍,想要详细了解相关内容可查看在线视频行式填报报表

注2:勾选了未修改不更新后,在数据提交时,只提交有改动的数据,未修改的数据不会写入数据库。极大提高了填报报表的数据提交效率。

注3:如果填报涉及到修改或删除操作,那么需要勾选一列为主键,这里的主键相当于 SQL 中 where 的效果。

Snag_9236f24.png

2.6 设置模板 Web 属性

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

注:模板 Web 属性不是必须设置项,也可直接使用默认的Web属性设置。

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

Snag_93bccef.png

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

注:勾选填报当前编辑行背景设置并添加某个背景色之后,在进行填报预览时,选中某个数据,该数据以设置好的背景色高亮展示。

Snag_947e8e9.png

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%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式填报报表.cpt

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