如何设置SpreadJS的表格样式

JavaScript018

如何设置SpreadJS的表格样式,第1张

设置样式的方式跟html中的css类似，SpreadJS有很多样式的属性，通过设置对应的属性来完成整体样式的设置：

构造一个样式并设置不同的属性, 示例代码如下:

var style = new GC.Spread.Sheets.Style()

style.backColor = 'red'

style.foreColor = 'green'

style.isVerticalText = 'true'

之后可以将此样式设置给单元格, 行, 或者列:

//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)

样式在不同的层级结构中具有不同的优先级别, 如下: 单元格 >行 >列。

另外，SpreadJS 支持给样式设置一个名称, 并将这个命名过的样式加入到表单的名称样式集合中。这样让样式的使用和管理更方便。

构造一个名称样式, 并将此样式添加到表单或者 Spread 控件的名称样式集合中。

var style = new GC.Spread.Sheets.Style()

style.name = 'style1'

style.backColor = 'red'

//add to sheet's named style collection.

sheet.addNamedStyle(style)

//add to spread's named style collection.

spread.addNamedStyle(style)

当名称样式添加到表单名称样式集合中后, 可以通过样式的名称找到它:

sheet.getNamedStyle('style1')

spread.getNamedStyle('style1')

如果名称样式不再使用, 你可以将其从名称集合中删除掉:

sheet.removeNamedStyle('style1')

spread.removeNamedStyle('style1')

通过style的相关接口进行设置，单元格的样式都在style中保存。

可以构造一个样式并设置不同的属性，例如：

var style = new GC.Spread.Sheets.Style()

style.backColor = 'red'

style.foreColor = 'green'

style.isVerticalText = 'true'

之后，你可以将此样式设置给单元格, 行, 或者列:

sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport)

sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport)

sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport)

样式在不同的层级结构中具有不同的优先级别, 单元格 > 行 > 列。

可以构造多个样式并设置属性，用于对比看出优先级，例如：

1.构造单元格的样式

var cellStyle = new GC.Spread.Sheets.Style()

cellStyle.backColor = 'red'

2.构造行样式

var rowStyle = new GC.Spread.Sheets.Style()

rowStyle .backColor = 'green'

3.构造列样式

var colStyle = new GC.Spread.Sheets.Style()

colStyle.backColor = 'yellow'

4.给单元格，整行，整列设置上述样式：

sheet.setStyle(5,5,cellStyle, GC.Spread.Sheets.SheetArea.viewport)

sheet.setStyle(5,-1,rowStyle, GC.Spread.Sheets.SheetArea.viewport)

sheet.setStyle(-1,5,colStyle, GC.Spread.Sheets.SheetArea.viewport)

sheet.setStyle(-1,6,colStyle, GC.Spread.Sheets.SheetArea.viewport)

上述代码执行效果如下图所示：

由此可见，样式的优先级：单元格 > 行 > 列