【SpreadJS V15.1 新特性介绍】集算表列头折叠模式增强

收藏

本帖最后由 Clark.Pan 于 2022-6-5 21:33 编辑

SpreadJS V15.1中对集算表的列头功能做了增强，在之前的版本列头功能（headerFit）有三种模式可供设置:

1.normal(default)
即默认模式，正常的一列列横向排列。
2.vertical
即垂直模式，文字垂直排列。
3.stack
即折叠模式，多列文字聚合显示。如下图所示，是三种排列形式的表现：
image.png576573180.png

在V15.1中，SpreadJS对原先的 stack (折叠模式）进行了增强，在原先的stack中遇到下一列如果是vertical或者normal就会停止折叠。例如下图所示：
image.png292455748.png

省份和汽车品牌都是垂直模式，年份我们选择了stack折叠模式。当年份遇到下一列省份是非折叠模式（vertical）时，就会停止继续折叠，无论下下一列汽车品牌是否仍然是垂直模式，成上图的样子。
而在新版本V15.1中。情况发生了变化，当遇到下下一列汽车品牌仍然是垂直模式时，会继续发生穿透进行折叠。直到遇到normal类型的列为止。如下图所示：
image.png861476135.png

这样做的好处是，更能表现出数据的层级关系，如果两列或某几列的数据存在父子关系，那么就可以用上面的方法进行表达，父关系用stack，子关系用vertical。
这样的表格内容也更能易于理解。

这里可能有小伙伴们就有疑问了，既然normal是stack折叠穿透的终止符，那么如果我想要实现下图的效果该如何实现呢：
image.png308226622.png

如上图所示，test与project都是垂直显示的文字，但是Tests的stack效果没有穿透projects，按照上面我们所说的逻辑是会穿透过project列的。那么这里又是如何实现的呢，实际上test1，test2，test3确实设置的是headerFit: "vertical"也就是垂直模式。但是project1和project2却没有设置headerFit，也就是默认的normal模式。
但是为什么project1和project2是垂直显示呢，是因为在project1和project2中设置了headerStyle，在headerStyle中设置了textOrientation: -90这个属性，这个属性同样能将文字垂直显示，同时也不会触发stack穿透的效果。和前面的headerFit进行了互补，两者结合使用，就能完美解决这样的问题了。

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

【SpreadJS V15.1 新特性介绍】集算表列头折叠模式增强

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄

【SpreadJS V15.1 新特性介绍】 集算表列头折叠模式增强

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄

【SpreadJS V15.1 新特性介绍】集算表列头折叠模式增强