还在担心报表不好做?不用怕,试试这个方法(二)

前言

在上一篇文章《还在担心报表不好做?不用怕,试试这个方法》中,小编分享了如何使用模板语言生成报表的过程。今天小编进一步介绍模板语言中一些基本的概念和用法,因此读者可以配合上一篇文章一起看。

本文介绍的内容有:

  • 模板文件
  • 绑定数据源
  • 单元格扩展
  • 模板属性
  • 分组
  • 排序
  • 公式
  1. 模板文件

在报表生成的过程,需要提供一个模板用于填充数据和整理报表的布局,样式以及模板语言等业务相关的设计,都包含在模板文件中。通常这个模板可以用Excel设计来实现。

  1. 绑定数据源

在Excel中准备好模板配置(包含绑定字段、表达式、公式、工作表字段)后,需要将这些字段绑定一个数据源。模板支持三种数据源,ResultSet(结果集)、对象实例和Json。

(1)ResultSet(结果集):

代码示例:

Java 复制代码
Workbook workbook = new Workbook();
workbook.open("template.xlsx");
ResultSet resultSet = getDataFromDataBase();
workbook.addDataSource("ds", resultSet);
workbook.processTemplate();

(2)对象实例

代码示例:

Java 复制代码
Workbook workbook = new Workbook();
workbook.open("template.xlsx");
Data data = new Data();
workbook.addDataSource("ds",data);
workbook.processTemplate();

(3)JSON

代码示例:

Java 复制代码
Workbook workbook = new Workbook();
workbook.open("template.xlsx");
String json = "{\"name\":\"john\",\"score\",100}";
workbook.addDataSource("ds", new JsonDataSource(json));
workbook.processTemplate();
  1. 单元格扩展

在上一篇文章《还在担心报表不好做?不用怕,试试这个方法》中,小编曾经提过模板语言是通过 "{{}}" 将数据源及字段名包括在内,表示在特定单元格中填充数据。而当处理模板时,模板引擎会根据数据路径从数据源中去寻找对应的数据。如果找到的数据只有一个,那么就用数据替换"{{}}",如果对应的是一组数据,则填充数据时会自动扩展单元格。

假设现在有一个模板如下:

当我们把这个模板和前面的数据源结合在一起运行后,将看到下面的结果:

从上表中可以看出,因为员工是一组数据,所以模板引擎会在 A1 单元格的位置下面插入一些单元格,用来放置多出来的数据。这种行为策略被称为"扩展"。

在模板中,扩展有两个方向,纵向(垂直向下)和横向(水平向右),其中默认为纵向扩展。如果希望横向扩展,可以使用 Expansion 属性。例如下图所示,小编将{{ds.员工}} 改为 {{ds.员工(Expansion=Horizontal)}}。

数据源填充后的结果如下:

  1. 模板属性

在第三步单元格扩展中,小编使用到了 Expansion 属性,来指定单元格横向扩展。实际上,对于模板语言而言,其提供了一组模板属性,用来配置各种设置,如分组,排序,分页,父子关系等,也包括刚才使用到的扩展。

模板属性的语法有以下特点:

  1. 使用半角小括号括起来 "()"
  2. 放在绑定字段的后面。例如 "ds.员工"
  3. 可以使用缩写,如 E = H
  4. 当需要设置多个属性时,使用逗号 "," 分割,如 (E=H, S=Desc)

下图是一个例子,其绑定名为 ds 的数据源,员工字段,并且横向扩展,降序排列。

因为篇幅原因,这里不做过多扩展,如果您想了解更多信息可以点击这里查看。

  1. 分组

再回到模板示例来看,虽然数据源中员工字段的数据并不唯一,但是在生成的报表中,员工名字做了去重。这是因为分组模板属性 Group (G)中有四种值:

  • Merge (M) 默认值,表示数据去重,并且将相同值的单元格合并在一起
  • List (L) 平铺数据源中的数据,不做任何分组或去重
  • Normal (N) 数据中的每种值仅出现一次,但是相同值的单元格不合并在一起
  • Repeat (R) 将父子单元格一起进行分组,并且相同值的单元格不合并在一起

以List为例,小编将模板的 Group 设置为 List:

显示结果如下:

  1. 排序

在第五步分组的例子中,虽然小编按照List的形式将数据进行展示,但是可以发现报表中数据的顺序并不一致。这是因为当没有指定 Group 时,默认的 Merge 会自动排序。但当 Group 为 List 时,则不会排序,因此还需要对数据进行排序设置:

和分组一样,排序也提供了一个模板属性 Sort (S),包括下面三个值:

  • Ascending (ASC) 升序排列
  • Descending (DESC) 降序排列
  • None 与数据源保持一致,不做排序

同样地,如果希望不做任何排序,与数据源保持一致时,我们应该按下图设计模板,

显示结果如下:

  1. 公式

在大多数情况下,数据源所提供的数据就是报表所需的直接结果,数据源可能来自数据库,第三方数据服务,前端传输的数据。组织数据以及数据源结构,也是业务逻辑的一环,为了进一步解耦,将业务独立包含在模板文件中。

目前模板语言支持以下几种函数:

  • Sum
  • Count
  • Max
  • Min
  • Min
  • Product
  • StdDev
  • StdDevp
  • Var
  • Varp

以Sum函数为例,假设小编现在需要计算所有数据销量之和,在单元格中直接使用公式"{{=sum(ds.销量)}}"即可。

在模板引擎处理模板,填充数据时,会根据公式进行计算,并且将结果填充至单元格内。如下图所示:

更多公式相关的内容,可以参考产品文档以及在线示例

总结

本文所提到的所有内容均来自葡萄城公司的服务端表格控件产品GcExcel。如果您想了解更多信息,可以参考这篇产品文档Demo 网站

扩展链接:

Redis从入门到实践

一节课带你搞懂数据库事务!

Chrome开发者工具使用教程

如何在Web应用中添加一个JavaScript Excel查看器

高性能渲染------详解HTML Canvas的优势与性能

相关推荐
Yvemil71 分钟前
《开启微服务之旅:Spring Boot Web开发举例》(一)
前端·spring boot·微服务
java_heartLake20 分钟前
Vue3之性能优化
javascript·vue.js·性能优化
Swift社区24 分钟前
HarmonyOS 实践 - 设计模式在代码中的作用
javascript
少年姜太公42 分钟前
从零开始详解js中的this(下)
前端·javascript·程序员
哑巴语天雨1 小时前
React+Vite项目框架
前端·react.js·前端框架
初遇你时动了情1 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
乔峰不是张无忌3301 小时前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
鸿蒙自习室1 小时前
鸿蒙UI开发——组件滤镜效果
开发语言·前端·javascript
m0_748250742 小时前
高性能Web网关:OpenResty 基础讲解
前端·openresty
前端没钱2 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js