找回密码
 立即注册

QQ登录

只需一步,快速开始

KevinChen 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-3-27 11:48  /   查看:2771  /  回复:0
本帖最后由 Winny 于 2021-3-17 10:07 编辑

    在我们设计报表模板时,经常会遇到表头(行、列头)有合并单元格的情况,对于报表最终绑定的数据,大部分情况下也都是不确定行数的(纯单元格绑定除外)。
因此,我们有很大概率会遇到这样的问题:table绑定数据 + 行列头合并单元格
    在Excel中,table是不允许出现合并单元格的,具体原因和解决方法,可以参考:table数据绑定时怎么解决导出Excel后报错的问题?
    那么现在我们面临的问题就是:隐藏table表头后,在设计表单时怎样实现行头、列头的合并单元格。
    实际上,在SpreadJS的设计器中,我们可以通过选中区域 --> 点击合并单元格按钮的方式来实现,就像在Excel中一样好用。但是,如上所说,当我们面对不定项的数据绑定,行头的单元格该怎么实现自动合并呢?难道只能自己写程序去判断吗?
    针对V13之前的用户来说,很遗憾,的确只能自己写程序判断,但V13新加入了自动合并单元格的功能,我们可以针对自己的模板,实现各种灵活的合并单元格策略,下面将一一介绍:

    1、列方向合并单元格  
    示例demo:https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/auto-merge/column-auto-merge/purejs
    最常用的不外乎就是在列方向上,把相同的值执行合并。
    这个功能其实最长见于分层统计、分类汇总等表格应用场景中。
    SpreadJS提供了两套策略:
  1. GC.Spread.Sheets.AutoMerge.AutoMergeMode.restricted
  2. GC.Spread.Sheets.AutoMerge.AutoMergeMode.free
复制代码
   restricted模式会严格按照从左向右的层级关系来执行自动合并,free模式则不会受这个限制。大家可以在学习指南中切换两个策略,直观看到效果。

    2、区域自动合并
    示例demo: https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/auto-merge/range-auto-merge/purejs
    不局限于列,SpreadJS可以针对行和列同时执行自动合并的操作,如学习指南示例所示。
    我们知道,在区域中执行自动合并,逻辑会更复杂一些,我们需要决定是优先合并行、还是列,抑或优先合并行或列?幸运的是SpreadJS为我们提供了完整的四种策略,可以用参数执行切换:
  1. GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column
  2. GC.Spread.Sheets.AutoMerge.AutoMergeDirection.row
  3. GC.Spread.Sheets.AutoMerge.AutoMergeDirection.columnRow
  4. GC.Spread.Sheets.AutoMerge.AutoMergeDirection.rowColumn
复制代码
它们依次代表:仅合并列、仅合并行、优先合并列、优先合并行。

    3、标题区域自动合并
    示例demo:https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/auto-merge/header-auto-merge/purejs
    用过SpreadJS的小伙伴应该知道,SpreadJS比Excel更加强大,更贴近于传统Grid的地方在于它的行头区域和列头区域都可以看做是独立的表格区域,可以设置值、样式、格式等。自动合并单元格也对它们做了支持。只要通过以下参数控制即可:
  1. GC.Spread.Sheets.SheetArea.colHeader
  2. GC.Spread.Sheets.SheetArea.rowHeader
复制代码
第一个代表列头,第二个代表行头。

    最后提醒大家,设置了自动合并单元格的区域,不能重复设置,否则会抛出异常!
    当我们为某个区域设置自定义合并单元格策略前,不确定这片区域是否执行过自动合并单元格,可以通过以下代码清除它的合并策略,再执行新的合并策略,这样就不会报错了,参考代码:
  1. sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.none);
复制代码



0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部