【SpreadJS V15.1 新特性介绍】 集算表列头折叠模式增强
本帖最后由 Clark.Pan 于 2022-6-5 21:33 编辑SpreadJS V15.1中对集算表的列头功能做了增强，在之前的版本列头功能（headerFit）有三种模式可供设置:
1.normal(default)
即默认模式，正常的一列列横向排列。
2.vertical
即垂直模式，文字垂直排列。
3.stack
即折叠模式，多列文字聚合显示。如下图所示，是三种排列形式的表现：
在V15.1中，SpreadJS对原先的 stack (折叠模式）进行了增强，在原先的stack中遇到下一列如果是vertical或者normal就会停止折叠。例如下图所示：
省份和汽车品牌都是垂直模式，年份我们选择了stack折叠模式。当年份遇到下一列省份是非折叠模式（vertical）时，就会停止继续折叠，无论下下一列汽车品牌是否仍然是垂直模式，成上图的样子。
而在新版本V15.1中。情况发生了变化，当遇到下下一列汽车品牌仍然是垂直模式时，会继续发生穿透进行折叠。直到遇到normal类型的列为止。如下图所示：
这样做的好处是，更能表现出数据的层级关系，如果两列或某几列的数据存在父子关系，那么就可以用上面的方法进行表达，父关系用stack，子关系用vertical。
这样的表格内容也更能易于理解。
这里可能有小伙伴们就有疑问了，既然normal是stack折叠穿透的终止符，那么如果我想要实现下图的效果该如何实现呢：
如上图所示，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进行了互补，两者结合使用，就能完美解决这样的问题了。
页:
[1]