构造一个样式并设置不同的属性, 示例代码如下:
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)
上述代码执行效果如下图所示：
由此可见，样式的优先级：单元格 > 行 > 列
创建和插入例子，按需自改/** * 创建表格 * id 为表格id * arr 为表格表头 */ function createTable(id,arr){ var table = document.createElement('table') table.setAttribute("id",id) table.setAttribute("className","TableLine")//设定样式 table.setAttribute("width",'98%') table.setAttribute("cellpadding",'3') table.setAttribute("cellspacing",'0') var row = table.insertRow() row.style.setAttribute("backgroundColor","#e0e0e0") for (var i = 0i <arr.lengthi++) { var col = row.insertCell() if(i==0){ col.setAttribute("width",'3%') } col.setAttribute("className","border:1px solid #9BC2E0") col.setAttribute("align","center") col.style.fontSize="13px" col.style.fontWeight="Bold" //var style = document.createAttribute("styles") //style.nodeValue = "font-size:large" //col.setAttributeNode(style) col.innerHTML = arr[i] } //alert(table.outerHTML) return table }
/** * 向表格插入一行 */ function addRow(table,id,arr){var row = table.insertRow() row.setAttribute("id",id) row.onclick=function (){} for(var i=0i<arr.lengthi++){ var col = row.insertCell() col.innerHTML = arr[i] //col.innerText = arr[i] col.setAttribute("title",arr[i]) } }
