找回密码
 立即注册

QQ登录

只需一步,快速开始

Richard.Ma 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-6-30 16:41  /   查看:2190  /  回复:0
本帖最后由 Ellia.Duan 于 2023-11-27 14:53 编辑

很对用户在使用table时,都有给table添加多行合并表头的需求。下图就是一个典型的多行合并表头需求,

image.png956584777.png


对于table表头,在excel中,你会发现实际是不支持被合并的
image.png684914855.png

spreadjs虽然做了扩展,可以合并table 表头,但是合并后,table表头的过滤器也会丢失(合并单元格只能保留左上角的单元格信息)
image.png381068724.png



因此,目前要实现多级表头的效果,此前的建议做法是,隐藏table的真实表头,完全使用假表头来实现,这样的好处是,表头完全由普通单元格组成,样式设置,合并单元格非常灵活
image.png705338439.png

但是这样带来的一个问题是table表头自带过滤器就无法使用了,对有过滤需求的用户来说,这样的方案也没法满足需求

这篇教程中,会介绍在保留table标题行的情况下,通过背景色,边框等设置,来实现视觉上的多级合并表头效果。

我们从一个原始的table开始介绍
image.png527024840.png

这个table中,有8列,列头名称不建议修改,修改后会导致table列公式计算错误等问题,我们选择只是把文字颜色设置和背景色一样来隐藏
另外,设置包括标题行和上方2行区域的背景色,要设置为和当前table主题样式中的边框颜色一致,这样才能隐藏表头的边框
具体颜色为rgb(123, 175, 221) 或者说#7bafdd
image.png829088439.png


接下来,可以根据,你要做的多行表头效果,来设置每个表格区域的外边框。
image.png186772765.png

这里我们实际没有对标题行做任何合并单元格操作,隐藏过滤器图标得以保留,仅通过设置边框实现了视觉上的合并效果

设置单元格文本后,即可得到多行表头效果
image.png985346984.png


此时选中左侧的单元格,用户会发现实际并未合并
image.png54956053.png


可以通过工作表保护的功能,锁定表头区域而不锁定表格数据区域,这样表头区域就无法被用户修改了
image.png473125914.png



最后也附上上述步骤生成的ssjson文件,供大家参考

multipleColumnHeader.ssjson (26.46 KB, 下载次数: 150)

0 个回复

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