概述

教学视频

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

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

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

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

初始化报表示例的数据库

新建一个baskreportsample数据库，并利用报表范例的SQL脚本完成初始化。 下载SQL脚本

新建报表

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

数据准备

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

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

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

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

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

报表标题设置

参考下图：

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

字段绑定设置

参见上图，字段绑定关系如下：

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

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

表格边框设置

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

预览

保存报表后，预览效果如下：

实现分组

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

预览效果：

部门编号映射为部门名称

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

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

保存后再次预览效果：

性别映射

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

保存后预览效果为：

设置生日日期格式

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

yyyy年MM月dd日

婚否映射

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

预览效果：

薪水数据格式化

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

,### 元

预览效果为：

网址链接

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

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

预览效果为：

实现报表查询功能

定义报表参数

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

并设置EMPLOYEE数据集的sql为:

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

其中：

${}

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

$employeeId

表示为employeeId参数。

定义查询表单

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

保存后预览报表：

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

水印

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

保存后预览效果图：

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

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

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

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

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

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