一、SpreadJS全局样式
在SpreadJS中，有着丰富的样式体系，例如Worksheet的全局样式、列样式、行样式、单元格样式以及条件格式。
之所以有这么丰富的样式体系，是为了能够灵活适配用户的样式需求，
并且确保最大化的执行性能。例如当要给全局设置某个字体，我们首先
想到的肯定不是批量给每个单元格都设置一个样式，这时就可以利用
表单默认样式来设置全局样式，例如将全局背景色设置为红色：
- var defaultStyle = sheet.getDefaultStyle();
- defaultStyle.backColor = "red";
- sheet.setDefaultStyle(defaultStyle);
这个问题实际上涉及到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表单设计 —— 常见问题解析
公开课中，讲解样式污染的示例，我贴在附件中，请大家参考。
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
