找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-6-5 21:30  /   查看:2144  /  回复:0
本帖最后由 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进行了互补,两者结合使用,就能完美解决这样的问题了。



0 个回复

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