KevinChen 发表于 2020-7-27 18:34:40

在SpreadJS样式的使用中容易犯的一些错误

一、SpreadJS全局样式
在SpreadJS中,有着丰富的样式体系,例如Worksheet的全局样式、列样式、行样式、单元格样式以及条件格式。
之所以有这么丰富的样式体系,是为了能够灵活适配用户的样式需求,
并且确保最大化的执行性能。例如当要给全局设置某个字体,我们首先
想到的肯定不是批量给每个单元格都设置一个样式,这时就可以利用
表单默认样式来设置全局样式,例如将全局背景色设置为红色:
var defaultStyle = sheet.getDefaultStyle();
defaultStyle.backColor = "red";
sheet.setDefaultStyle(defaultStyle);那么当我设置了全局样式后,能否再对某个单元格或区域,单独设置backColor呢?
这个问题实际上涉及到SpreadJS的样式优先级的机制。

二、SpreadJS样式优先级
SpreadJS的所有样式,包括边框、字体、对齐、背景色、字号,甚至
单元格类型、单元格格式等,都包含在样式类Style中。那么这就牵扯到一个问题:
当不同层次的样式,发生了冲突时(比如在表单、列和单元格上都设置了背景色),
那应该按照谁为准呢?
实际上,SpreadJS针对不同层次的样式,有不同的渲染优先级,如下:
条件格式 > 单元格 > 行 > 列 > 表单我们只需要记住,样式影响的范围越小,渲染优先级越高。

但这里又涉及到一个新的问题,Style中包含的样式属性那么多,并非都是按照高优先级
的Style对象属性来渲染,只有当高优先级Style的属性值为有效值(不为null或undefined)
时,才会执行对应的渲染。

这样又会有小伙伴会问到,那最后页面上渲染的效果,不是多级别样式对象同时影响的结果吗?
那我们怎么才能在代码中知道具体渲染的样式是什么呢?
实际上,SpreadJS提供了对应的接口:getActualStyle

三、样式污染
经过以上的铺垫,相信大家对SpreadJS的样式体系已经有了完整的认识,这第三部分
我想介绍一个新人经常会犯的错误,我称之为“样式污染”。相信有了以上的了解,
大家不难理解这个问题的原因。
大家想一下,为什么SpreadJS要搞这么复杂,弄出一个多层优先级不同的样式体系?
前端物理极限有限,不能像Excel那么任性,可以调用近乎全部的系统资源来渲染表格,
SpreadJS用Style对象来管理样式,Style又包含了大量的信息,为了尽可能减少Style对象
的生成,降低内存的消耗,这才采用了多层样式的机制。

既然Style的本质是JS对象,那就遵循JS语言的所有特性,比如,当你把一个Style对象
通过sheet.setStyle()设置给两个不同单元格时,这两个单元格表面上看起来达到了希望的
效果——样式一致了,但这时我们要更改其中的一个单元格样式,比如用sheet.getCell()
这种方式,就会导致两个单元格的样式同时改变。
同理,当我们将一个Style对象的单元格类型(Combobox/Checkbox等)改变后,也会
导致其它单元格的“联动”,通常这不是我们想看到的结果。

之前在公开课中,我演示过这个问题,参考:
SpreadJS表单设计 —— 常见问题解析
公开课中,讲解样式污染的示例,我贴在附件中,请大家参考。
页: [1]
查看完整版本: 在SpreadJS样式的使用中容易犯的一些错误