Richard.Ma 发表于 2023-6-30 16:41:25

为table添加多行合并表头(同时保留真实表头的过滤功能)

本帖最后由 Ellia.Duan 于 2023-11-27 14:53 编辑

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



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

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



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

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

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

我们从一个原始的table开始介绍

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


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

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

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


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


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



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


页: [1]
查看完整版本: 为table添加多行合并表头(同时保留真实表头的过滤功能)