你可以构造一个样式并设置不同的属性, 示例代码如下:
然后你可以将此样式设置给单元格, 行, 列, 或者一片区域:
样式在不同的层级结构中具有不同的优先级别, 如下: 单元格 > 行 > 列。
SpreadJS 支持给样式设置一个名称, 并将这个命名过的样式加入到表单的名称样式集合中。这样让样式的使用和管理更方便。
你可以构造一个名称样式, 并将此样式添加到表单或者 Spread 控件的名称样式集合中。
当名称样式添加到表单名称样式集合中后, 可以通过样式的名称找到它或直接通过名称设置样式:
如果名称样式不再使用, 你可以将其从名称集合中删除掉:
var data = [
["Month", "Payment", "Principal", "Interest", "Balance"],
[1, 8750.00, 8333.34, 416.67, 91666.67],
[2, 8715.28, 8333.34, 381.94, 83333.33],
[3, 8680.56, 8333.34, 347.22, 75000.00],
[4, 8645.83, 8333.34, 312.50, 66666.67],
[5, 8611.11, 8333.34, 277.78, 58333.33],
[6, 8576.39, 8333.34, 243.06, 50000.00],
[7, 8541.67, 8333.34, 208.33, 41666.67],
[8, 8506.94, 8333.34, 173.61, 33333.33],
[9, 8472.22, 8333.34, 138.89, 25000.00],
[10, 8437.50, 8333.34, 104.17, 16666.67],
[11, 8402.78, 8333.34, 69.44, 8333.33],
[12, 8368.06, 8333.34, 34.72, 0.00],
["Total", 102708.33, 100000.00, 2708.33]
]
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 2
});
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
var spreadNS = GC.Spread.Sheets;
sheet.suspendPaint();
sheet.name("Basic Usage");
var cellStyle = new spreadNS.Style();
cellStyle.backColor = "#f7a711";
var rowStyle = new spreadNS.Style();
rowStyle.backColor = "#82bc00";
var columnStyle = new spreadNS.Style();
columnStyle.backColor = "#cccccc";
sheet.setText(4, 4, 'cell style', spreadNS.SheetArea.viewport);
sheet.setStyle(4, 4, cellStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(4, -1, rowStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(9, -1, rowStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(-1, 4, columnStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(-1, 6, columnStyle, spreadNS.SheetArea.viewport);
cellStyle.name = 'style1';
rowStyle.name = 'style2';
columnStyle.name = 'style3';
sheet.addNamedStyle(cellStyle);
sheet.addNamedStyle(rowStyle);
sheet.addNamedStyle(columnStyle);
sheet.setText(1, 0, 'style1', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 0, sheet.getNamedStyle('style1'), spreadNS.SheetArea.viewport);
sheet.setText(1, 1, 'style2', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 1, sheet.getNamedStyle('style2'), spreadNS.SheetArea.viewport);
sheet.setText(1, 2, 'style3', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 2, sheet.getNamedStyle('style3'), spreadNS.SheetArea.viewport);
var style5 = new spreadNS.Style();
style5.backColor = "red";
style5.isVerticalText = 'true';
style5.textIndent = 5;
var style6 = new spreadNS.Style();
style6.backColor = "green";
style6.isVerticalText = 'true';
style6.wordWrap = 'true';
var style7 = new spreadNS.Style();
style7.backColor = "yellow";
style7.isVerticalText = 'true';
style7.shrinkToFit = 'true';
sheet.resumePaint();
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, onSelectionChanged.bind(sheet));
var sheet1 = spread.getSheet(1);
sheet1.suspendPaint();
sheet1.name("Loan");
sheet1.setColumnCount(5);
for (let i = 1; i < 5; i++) {
sheet1.setColumnWidth(i, 100);
}
sheet1.setValue(0, 0, "Principal: $100,000.00");
sheet1.setValue(1, 0, "Interest rate: 5.00%");
sheet1.setValue(2, 0, "Payment interval: Monthly");
sheet1.setValue(3, 0, "Number of payments: 12");
sheet1.setArray(5, 0, data);
var summaryStyle = new GC.Spread.Sheets.Style();
summaryStyle.backColor = "#D9EAD3";
sheet1.getRange(0, 0, 4, 3).setStyle(summaryStyle);
var headStyle = new GC.Spread.Sheets.Style();
headStyle.font = "bold 12px sans-serif";
headStyle.backColor = "#cccccc";
var contentStyle = new GC.Spread.Sheets.Style();
contentStyle.backColor = "#81b100";
sheet1.getRange("A6:E6").setStyle(headStyle);
sheet1.getRange(5, 0, 14, 5).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
for (let r = 6; r < 18; r++) {
if (r % 2 == 0) {
sheet1.setStyle(r,-1,contentStyle);
}
}
var currencyStyle = new GC.Spread.Sheets.Style();
currencyStyle.formatter = "[$$-409]#,##0.00";
currencyStyle.name = "currency";
sheet1.addNamedStyle(currencyStyle);
sheet1.getRange(6, 1, 13, 4).setStyleName("currency");
sheet1.getRange(18,0,1,5).font("bold 12px sans-serif")
sheet1.resumePaint();
sheet1.bind(GC.Spread.Sheets.Events.SelectionChanged, onSelectionChanged.bind(sheet1));
}
function onSelectionChanged(eventName, args) {
var sheet = this;
var newSelections = args.newSelections[0];
var style = sheet.getStyle(newSelections.row, newSelections.col);
var actualStyle = sheet.getActualStyle(newSelections.row, newSelections.col);
_getElementById("getStyleLabel").innerHTML = "sheet.getStyle(" + newSelections.row + ", " + newSelections.col + ")";
_getElementById("getActualStyleLabel").innerHTML = "sheet.getActualStyle(" + newSelections.row + ", " + newSelections.col + ")";
_getElementById("getStyle").style.backgroundColor = getStyleColor(style);
_getElementById("getActualStyle").style.backgroundColor = getStyleColor(actualStyle);
}
function getStyleColor(style) {
var color = '';
if (style && style.backColor) {
color = style.backColor;
}
return color;
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<p style="padding:2px 10px;">Spread Styles are useful for consolidating visual properties that are use in a
lot of different cells.</p>
<p style="padding:2px 10px; background-color:#F4F8EB">
Select cell C2, E2, E5 or E10 then any other cell to see difference between the getStyle and
getActualStyle api.
</p>
<label id="getStyleLabel" for="getStyle">sheet.getStyle(0, 0)</label>
<input id="getStyle" type="text" disabled="disabled" />
<label id="getActualStyleLabel" for="getActualStyle">sheet.getActualStyle(0, 0)</label>
<input id="getActualStyle" type="text" disabled="disabled" />
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
