通过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)
上述代码执行效果如下图所示:
由此可见,样式的优先级:单元格 > 行 > 列
设置样式的方式跟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')
一、动态加载表格1.首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
<div id="tdl"><div>
2.在javascript中写添加表格的语句
若在当前html文件中,则写在<script>标签内部,如
复制代码 代码如下:
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建
</script>
若是通过引入js文件,则在js文件(假设是test.js)中直接写如下语句
复制代码 代码如下:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
复制代码 代码如下:
<script type="text/javascript" src="test.js"></script>
二、 动态添加表格行
1.首先在html中为表格行的添加位置设置id,此位置必须是<tbody>内部(不是特别准确,但根据我的测试就得到此结论,有其他的方法请留言,谢谢),如下
复制代码 代码如下:
<table>
<thead></thead>
<tfoot><tfoot>//tfoot与thead是与tbody配套使用,但我在写的时候,没用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]*\n
2.在javascript内容中,要先创建行和单元格,再在<.tbody>中添加行,如下
[code]
row=document.createElement("tr")//创建行
td1=document.createElement("tr")//创建单元格
td1.appendChild(document.createTextNode("content"))//为单元格添加内容
row.appendChild(td1)//将单元格添加到行内
document.getElementById("rows").append(row)//将行添加到<tbody>中
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)