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

前言

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

本文介绍的内容有:

  • 模板文件
  • 绑定数据源
  • 单元格扩展
  • 模板属性
  • 分组
  • 排序
  • 公式
  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的优势与性能

相关推荐
桂月二二4 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
CodeClimb5 小时前
【华为OD-E卷 - 第k个排列 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
hunter2062066 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb6 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角6 小时前
CSS 颜色
前端·css
九酒6 小时前
从UI稿到代码优化,看Trae AI 编辑器如何帮助开发者提效
前端·trae
浪浪山小白兔7 小时前
HTML5 新表单属性详解
前端·html·html5
lee5767 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579657 小时前
AI赋能Flutter开发:ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
光头程序员8 小时前
grid 布局react组件可以循数据自定义渲染某个数据 ,或插入某些数据在某个索引下
javascript·react.js·ecmascript