如何设置表格开发控件 SpreadJS 单元格样式

JavaScript07

如何设置表格开发控件 SpreadJS 单元格样式,第1张

通过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)

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

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

1、首先开始新建html文件。

2、然后创建一个三行三列的表格。

3、接下来开始创建js函数。

4、接下来开始进行定义变量获取行。

5、然后就将函数加在按钮上。

6、就可以看到预览效果如图。

7、最后点击第二个按钮删除 第二行。

您好，可以使用addSpan和removeSpan来实现合并与拆分单元格，

具体用法，可以参考葡萄城官方学习指南，以及葡萄城官方论坛GCDN中学习交流，

官方论坛有大量的实例，也有兢兢业业的客服会及时回复您的提问~！