スタイルを作成し、そのさまざまなプロパティを設定するには、次のようなコードを使用します。
次に、このスタイルをセル、行、列またはセル範囲に設定します。
スタイルはいくつかのレベルで設定できますが、その優先順位は「セル > 行 > 列」となります。
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="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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.SheetsのStyleクラスは、foreColor、backColorなどのプロパティを備えています。作成したスタイルは、セルまたはセル範囲に割り当てることができます。Spread Styleは、種類の異なる大量のセルが存在する場合に、視覚的な属性を統一するために便利です。</p>
<p style="padding:2px 10px; background-color:lavender">
セルC2、E2、E5、またはE10を選択してから、いずれかの別のセルを選択すると、getStyleおよび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;
}
