概述

下面开启Bask Report的HelloWorld学习之旅吧。

我们将以一个表格式的报表了解Bask Report的基本使用和开发技巧,效果图见:

image-20210506110150554

通过Hello World你将了解以下的基本内容:

  • 设计器的基本开发使用技巧
  • 数据相关
    • 数据准备
    • 数据绑定
  • 表格格式设计
    • 字段渲染处理
    • 字段数据映射
    • 多数据集的字段映射
    • 数据格式化处理
    • 字体样式处理
    • 字体样式动态处理
    • 单元格背景色处理
    • 超链接的实现
  • 分组的实现
  • 报表查询

    • 查询参数定义
    • 查询表单设计
  • 水印

新建报表

在报表设计器中新建报表HelloWorld。

image-20210506113930291

数据准备

如果你使用的是内置的数据源初始化的报表系统,则可以直接参考:JDBC数据连接, 建立一个名称为baskreport的JDBC数据源。

否则建议您创建一个mysql的数据库,并利用数据准备中的mysql数据脚本初始化数据库,之后再在新建报表中配置一个名称为baskreport的JDBC数据源.

如果使用内置数据源的jdbc配置参考:

image-20210506113704045

相关说明参考数据准备 中的数据源配置说明。

参考数据库数据集创建EMPLOYEE数据集

image-20210506114033172

报表标题设置

参考下图:

报表标题设置

选中A1单元格,输入“员工列表",并设置文字居中,同时调整字体为微软雅黑,字体大小为20,然后选中A1和J1之间的所有单元格,并单击单元格合并按钮合并单元格。

字段绑定设置

image-20210506114544524

参见上图,字段绑定关系如下:

单元格 字段 说明
A3 EMPLOYEE_ID ID
B3 DEPT_ID 部门编号
C3 EMPLOYEE_NAME 姓名
D3 SEX 性别
E3 BIRTHDAY 生日
F3 MARRIED 婚否
G3 SALARY 薪水
H3 DEGREE 学历
I3 EMAIL 邮件
J3 WEB 网址

字段绑定的设置方法见下图:

绑定字段

就是选中对应的单元格,并双击数据集中的字段名,就会自动将对应单元格的数据绑定到数据集的字段上。

表格边框设置

用鼠标选中A2到J3的所有区域,并设置单元格边框

边框设置

预览

保存报表后,预览效果如下:

image-20210506132742836

实现分组

如果我们想根据部门编号实现分组,则可以调整部门编号与ID交换位置,将A3的绑定字段调整为DEPT_ID,B3调整为EMPLOYEE_ID字段。

image-20210506133150652

预览效果:

image-20210506133214532

部门编号映射为部门名称

添加一个数据库数据集DEPT:

image-20210506133337688

调整部门编号的内容渲染为数据映射为数据集DEPT,并设置实际值字段为DEPT_ID,显示值字段为DEPT_NAME。

部门编号

保存后再次预览效果:

image-20210506134102826

性别映射

设置性别的内容渲染为数据映射,并设置为自定义的数据映射类型。并添加两个自定义映射的显示值:true设置为男,false为女。

性别

保存后预览效果为:

image-20210506134607427

设置生日日期格式

设置生日的值类型为日期,并设置日期格式为:

yyyy年MM月dd日

日期格式

婚否映射

同性别映射的方式,自定义的数据映射类型,设置true为已婚,false为未婚。

婚否

预览效果:

image-20210506135136959

薪水数据格式化

设置薪水设置值类型为数字,并设置格式化字符串为:

,### 元

薪水

预览效果为:

image-20210506135854112

网址链接

用执行JS脚本方式为网址添加链接,首先定义一个WEB参数,我们设置为#(表示当前数据绑定的值),并设置脚本代码为:

window.open("http://"+WEB, "_blank");

网址

预览效果为:

image-20210506140649363

实现报表查询功能

定义报表参数

为报表添加一个employeeId的参数,我们将值设置为%,目的是为了默认like过滤查询能查出所有的数据

报表参数

并设置EMPLOYEE数据集的sql为:

select * from EMPLOYEE where EMPLOYEE_ID like ${$employeeId}

其中:

${}

是Bask Report表达式的写法。其中的内容为#employeeId

$employeeId

表示为employeeId参数。

定义查询表单

切换到报表设计器的为查询表单,并添加employeeId的查询参数,并调整标题为员工ID。

查询表单

保存后预览报表:

报表查询

其中的查询功能已经实现。

水印

我们再为这个报表添加一个水印功能,如下图:

水印

保存后预览效果图:

image-20210507100857302

字体颜色设置(条件渲染)

我们可以根据数据动态的设置报表的格式,例如判断薪水超过20000的颜色显示为红色,方法如下:

薪水条件渲染

为G3单元格添加薪水条件渲染项,并设置如果G3单元格的数据大于20000,颜色为红色。保存后预览效果如下:

image-20210507101311802

字体格式设置(条件渲染)

我们也可以根据条件设置字体的格式,例如如果学历为博士,则字体为粗体,并调整字体大小为12号字体:

学历条件渲染

为H3单元格添加学历条件渲染项,并设置如果H3单元格的数据为字符串'博士'时的字体大小为12,并且为粗体。保存后预览效果如下:

image-20210507101835113

results matching ""

    No results matching ""