如何理解和应用 SpreadJS 中的样式（Style）

下载SpreadJS最新试用版

前言 | 问题背景

SpreadJS 中的 Style 简介

GC.Spread.Sheets.Style是SpreadJS样式类的完整名称，其中包含了很多的属性，例如：字体、前景色、背景色、锁定状态、对齐方式等等。

Style中定义了丰富的属性，用来定义各方面的样式。Style作用的对象也不仅限于单元格，而是可以设置到行(Row)、列(Column)甚至表(Worksheet)上。Spread JS在这里并没有完全照搬Excel的设计方式，而是采用了更为灵活强大的分级作用的设计，可以为前端开发者提供更高效更灵活的样式支持。

此外，Style还采用了复用和继承的概念来设计。例如Style支持一个name的属性，同时还支持parentName的属性，当我们设置好一个style实例时，可以为其起名，并添加到Worksheet中。在Worksheet上支持“样式表”的维护，可以采用addNamedStyle方法来将一个命名的style实例添加到样式表中。parentName可以指定一个“父类”样式实例，当指定了“parentName”后，当前style就获得了“父类”的所有设置。

学习指南示例分析

先看“描述”标签页。描述中先分别列举了单元格、行、列的样式设置方式，如下所示：

//set style to cell.sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport);//set style to row.sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport);//set style to column.sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport);

那么问题来了，当一个单元格既设置了单元格样式，其所在的行、列也都设置了样式时，展示结果到底应该是怎样的呢述中紧跟着就做出了解答：样式在不同层级结构中具有不同的优先级，其中单元格 > 行 > 列。补充一点，Worksheet也有表单级别的样式，可以通过sheet.getDefaultStyle()获取到，这个表单级别的样式优先级自然是最低的，因此总结如下：

样式优先级：单元格 > 行 > 列 > 表

如图所示：

（图1：样式优先级图示)

我为这个表单设置了默认样式，背景色为浅蓝（lightblue），第5行设置绿色，第C、E列设置了黄色，可以发现样式的作用方式严格依照上述的优先级执行。

代码Tips：怎样设置表样式。

//获取表默认样式var spread = GC.Spread.Sheets.findControl(“ss”).var sheet = spread.getActiveSheet();var sheetStyle = sheet.getDefaultStyle();//修改并设置表的默认样式.sheetStyle.backColor = “lightBlue”;sheet.setDefaultStyle(sheetStyle);

注意，以上描述的优先级概念，指的是当多个级别的样式中设置了相同的样式属性，不同样式的相同属性发生了冲突时，会按照优先级顺序，优先显示级别高的样式属性。而当多个级别的样式中设置了不同的样式属性时，例如，行样式中设置了字体，列样式设置了背景色、单元格样式中又设置了对齐方式，此时单元格的样式会综合多级别的样式来展示。

那么这时就会产生一个问题，当我们调用sheet.getStyle(row, col) 时，拿到的可能不是一个单元格的真实样式。Spread JS的Worksheet提供了一个方法来解决这个问题：getActualStyle，

这个方法会获取到当前单元格（或行、列）的实际样式。

用户常见问题分析

A：这是一个很典型的用例，当用户想利用表单保护来控制表单权限时通常会这么做，如果您仔细看了前面的内容，应该有思路了吧简单，我们可以通过设置Worksheet的默认Style来实现这个功能。更为方便的是，这个设置与单元格样式不冲突，我们可以很方便地设置单元格锁定来保护表单中某几个单元格。

代码Tips：怎样设置表默认为非锁定状态。

//获取表默认样式var spread = GC.Spread.Sheets.findControl(“ss”).var sheet = spread.getActiveSheet();var sheetStyle = sheet.getDefaultStyle();//修改并设置表的默认样式locked为false.sheetStyle.locked = false;sheet.setDefaultStyle(sheetStyle);

Q：怎么快速高效地给一个指定区域设置样式/strong>

A：我们可以参考CellRange这个类的API。可以看到API提供了全部的有关Style的方法。要获取一个CellRange实例也很简单，参考Worksheet的getRange方法API。

Q：我想在某个区域设置一个提醒色，比如当用户鼠标移入时，这个区域会根据区域内数据的内容来变色，数字显示红色，文本显示绿色等。

A：我们可以用自定义单元格类型的功能来轻松实现！

购买SpreadJS正版授权，请点击“咨询在线客服”哟！

标签：JavaScript 表格控件Spread