zoukankan      html  css  js  c++  java
  • 报表中的表格单元格合并:手动合并

    (一)背景介绍
    相信大家在设计报表时,为了让画面可读性更好,或者实现自由的报表样式效果,经常需要对表格的单元格进行横向、纵向的合并操作。而之前采用Excel制作的报表,大部分都有很复杂的表头结构,跨多行/多列的合并格式。带着这样一个使用上的需求,我们就来看看在Wyn Enterprise报表功能中如何实现单元格的合并需要。


    单元格合并有两种方式:
    1、在报表设计过程中,人工手动合并单元格。这种方式大多情况出现在表头的标题区域,或者表尾的汇总统计行区域。
    2、在报表运行过程中,将数据相同的相邻单元格进行自动合并。这种方式主要出现在数据绑定区域(明细行区域)。

    针对这两种合并方式,我们会分为两篇文章进行介绍,本文主要介绍第一种,在报表设计过程中,人工手动合并单元格。

    (二)实现方法
    接下来我们通过报表中的表格组件,来演示如何在设计器中实现单元格合并操作。

    第1步:新建报表,添加表格组件
    从工具箱中,拖拽(或者双击)添加一个表格组件到报表设计界面,新添加的表格有3行,这三行分别代表表格的三个组成区域:

    • 表头区域:通常用于显示表格标题信息。
    • 明细行区域:用于绑定数据字段,该区域会随着实际数据的行数而动态增加。
    • 表尾区域:通常用于显示表格数据汇总统计信息。




    第2步:在表头、明细和表尾区域添加多行
    新建的表格虽然只有三行,但是每一行代表一个表格组成区域,最重要的是,表格的每个组成区域都可以继续插入行和列。
    插入行列操作,可以通过鼠标右键菜单完成,如下图:


    也可以在表格的操作图标上完成。


    最后,我们在表格的每个区域都插入了更多的行和列,得到以下结果


    第3步:实现单元格的行/列合并
    在表格的每个区域内,选择你需要合并的单元格,点击鼠标右键,可以对单元格进行合并/拆分,操作如下:


    如果你选择的单元格分别在不同的表格区域,将不能进行单元格合并,因为每个区域单元格的作用不同。
    如下图选择了表头和明细行区域,将无法进行单元格合并操作。


    第四步:在分组头、分组尾区域进行单元格合并操作
    报表的表格组件,除了表头、明细行和表尾区域之外,还可以添加分组头和分组尾区域,这两个区域也能添加多行、多列,也支持单元格的合并操作。
    在表格中,将字段拖拽到分组列表区域,便会新增分组头和分组尾区域,如下图:


    同样,你可以在分组头和分组尾,通过通过鼠标右键插入多行,然后进行单元格合并操作。


    重要提示
    报表中的表格由五个区域组成,每个区域多可以插入多行和多列,然后可以对同一个区域的单元格进行合并/拆分操作,如果不在一个区域内的单元格无法进行合并操作

    好啦,知道表格单元格如何合并之后,你就可以更快速的创建各种表格类型的报表了。
    接下来的文章,我们会继续介绍表格单元格根据数据自动合并的实现方法。

  • 相关阅读:
    SpringCloud--Ribbon--源码解析--Ribbon入口实现
    SpringCloud--Ribbon--使用demo
    装饰着模式(Decorator Pattern)
    SpringCloud--Eureka--配置
    SpringCloud--Eureka--原理及源码解析
    SpringCloud--Eureka--搭建
    观察者模式(Observer Pattern)
    策略模式(Strategy Pattern)
    xeus-clickhouse: Jupyter 的 ClickHouse 内核
    Spring的学习与实战(续)
  • 原文地址:https://www.cnblogs.com/edoo/p/13900556.html
Copyright © 2011-2022 走看看