如何设置SpreadJS的表格样式

JavaScript010

如何设置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')

基本功能需要导入:

gc.spread.sheets.all.x.x.x.min.js (x代表的版本号)

导入导出功能需要导入:

gc.spread.excelio.x.x.x.min.js

PDF导出功能需要导入:

gc.spread.sheets.pdf.x.x.x.min.js

打印功能需要导入:

gc.spread.sheets.print.x.x.x.min.js

形状功能需要导入:

gc.spread.sheets.shapes.x.x.x.min.js

图表功能需要导入:

gc.spread.sheets.charts.x.x.x.min.js

二维码功能需要导入:

gc.spread.sheets.barcode.x.x.x.min.js

自定义填充

除了鼠标拖拽操作之外,你也可以自定义填充数据。 它允许你在运行时设置,当你想给一片从数据源读出来的数据进行填充设置的时候,这将会非常有用。

有5种类型的填充数据:

Auto: 自动填充类型。

Direction: 填充方向。

Linear:线性填充类型。

Growth: 增长填充类型。

Date: 日期填充类型。

SpreadJS 提供了一些方法来执行填充操作。

// Fills the specified range automatically.

 

// When the value is a string, the value is copied to other cells.

// When the value is a number, the new value is generated by the TREND formula.

sheet.fillAuto(startRange, fillRange, {series: GC.Spread.Sheets.Fill.FillSeries.column, fillType: GC.Spread.Sheets.Fill.FillType.auto})

// Fills the specified range in the specified direction.

 

sheet.fillAuto(startRange, fillRange, {direction: GC.Spread.Sheets.Fill.FillDirection.left, fillType: GC.Spread.Sheets.Fill.FillType.direction}) 

// Fills the specified range linear trend when the source value type is number.

// The next value is generated by the step and stop values.

 

// The next value is computed by adding the step value to the current cell value. 

sheet.fillAuto(startRange, fillRange, {series: GC.Spread.Sheets.Fill.FillSeries.column, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.linear})

// Fills the specified range growth trend when the source value type is number.

 

// The next value is generated by the step and stop values.

 

// The next value is computed by multiplying the step value with the current cell.    sheet.fillAuto(startRange, fillRange, {series: GC.Spread.Sheets.Fill.FillSeries.column, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.growth} 

// Fills the specified range when the source value type is date.

 

// The next value is generated by adding the step value to the current value.

 

// The step value is affected by the fill date unit.

 

sheet.fillAuto(startRange, fillRange, {series: GC.Spread.Sheets.Fill.FillSeries.column, unit: GC.Spread.Sheets.Fill.FillDateUnit.month, step: step, stop: stop, fillType: GC.Spread.Sheets.Fill.FillType.date})

参考下面网址:网页链接