复杂表头模板设计中关于合并单元格的问题

收藏

本帖最后由 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提供了两套策略：

GC.Spread.Sheets.AutoMerge.AutoMergeMode.restricted
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为我们提供了完整的四种策略，可以用参数执行切换：

GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column
GC.Spread.Sheets.AutoMerge.AutoMergeDirection.row
GC.Spread.Sheets.AutoMerge.AutoMergeDirection.columnRow
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的地方在于它的行头区域和列头区域都可以看做是独立的表格区域，可以设置值、样式、格式等。自动合并单元格也对它们做了支持。只要通过以下参数控制即可：

GC.Spread.Sheets.SheetArea.colHeader
GC.Spread.Sheets.SheetArea.rowHeader

复制代码

第一个代表列头，第二个代表行头。

最后提醒大家，设置了自动合并单元格的区域，不能重复设置，否则会抛出异常！
当我们为某个区域设置自定义合并单元格策略前，不确定这片区域是否执行过自动合并单元格，可以通过以下代码清除它的合并策略，再执行新的合并策略，这样就不会报错了，参考代码：

sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.none);

复制代码

		自动登录	找回密码
密码			立即注册

复杂表头模板设计中关于合并单元格的问题

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章