このサンプルでは、ワークブックレベルのテーマとテーブル固有のテーマの両方を使用して、TableSheet にテーマを適用する方法を示します。
ワークブックのテーマ
currentTheme メソッドを使用して、完全なワークブックテーマを適用できます。SpreadJS は GC.Spread.Sheets.Themes に 22 個の組み込みテーマを提供しています。
テーマの色
新しいテーマを作成し、GC.Spread.Sheets.ThemeColors の配色を適用することで、テーマカラーをカスタマイズできます。
テーマのフォント
同様に、GC.Spread.Sheets.ThemeFonts を使用してテーマフォントをカスタマイズできます。
テーブルシートテーマ
テーブルシート には applyTableTheme メソッドがあり、これは GC.Spread.Sheets.Tables.TableTheme インスタンスを受け取ります。
次の TableTheme スタイルが テーブルシート に適用されます。
スタイル
適用先
headerRowStyle
列ヘッダ領域のデフォルトスタイルに適用します
wholeTableStyle
ビューポート領域と列ヘッダー領域のデフォルトスタイルに適用されます
firstRowStripStyle
ビューポート領域の alternatingRowOptions スタイルに適用されます
secondRowStripStyle
ビューポート領域の alternatingRowOptions スタイルに適用されます
firstRowStripSize
ビューポート領域の alternatingRowOptions ステップに適用されます
secondRowStripSize
ビューポート領域の alternatingRowOptions ステップに適用されます
従来の組み込みテーブルテーマ（21 個のライトテーマ、28 個のミディアムテーマ、11 個のダークテーマ）に加えて、テーブルシート は "professional" プレフィックスを持つ 24 個の新しいテーマもサポートしています。
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
// データマネージャーを初期化します
var baseApiUrl = getBaseApiUrl();
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: baseApiUrl + "/Supplier"
}
}
});
// テーブルシートを初期化します
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.applyTableTheme(GC.Spread.Sheets.Tables.TableThemes.professional1);
// ビューをテーブルシートにバインドします
myTable.fetch().then(function() {
var view = myTable.addView("myView", [
{ value: "Id", width: 80 },
{ value: "CompanyName", width: 200, caption :"Company Name" },
{ value: "ContactName", width: 150, caption :"Contact" },
{ value: "ContactTitle", width: 200, caption :"役職" },
{ value: "Address", width: 200 },
{ value: "City", width: 150, caption :"都市" },
{ value: "State", width: 100, caption :"州" },
{ value: "Region", width: 100, caption :"地域" }
]);
sheet.setDataView(view);
});
spread.resumePaint();
// ワークブックのテーマオプションを設定します
var workbookThemeSelect = document.getElementById("workbookTheme");
Object.keys(GC.Spread.Sheets.Themes).forEach(function(themeName) {
var option = document.createElement("option");
option.value = themeName;
option.text = themeName;
if (themeName === "Office") {
option.selected = true;
}
workbookThemeSelect.appendChild(option);
});
workbookThemeSelect.addEventListener("change", function () {
let selectedTheme = workbookThemeSelect.value;
let theme = GC.Spread.Sheets.Themes[selectedTheme];
sheet.currentTheme(theme);
});
// テーマカラーのオプションを設定します
var themeColorsSelect = document.getElementById("themeColors");
Object.keys(GC.Spread.Sheets.ThemeColors).forEach(function(colorName) {
var option = document.createElement("option");
option.value = colorName;
option.text = colorName;
if (colorName === "Office") {
option.selected = true;
}
themeColorsSelect.appendChild(option);
});
themeColorsSelect.addEventListener("change", function () {
let selectedColorScheme = themeColorsSelect.value;
let currentTheme = sheet.currentTheme();
let newTheme = new GC.Spread.Sheets.Theme();
newTheme.fromJSON(currentTheme.toJSON());
newTheme.colors(GC.Spread.Sheets.ThemeColors[selectedColorScheme]);
newTheme.name('custom-theme');
sheet.currentTheme(newTheme);
});
// テーマフォントのオプションを設定します
var themeFontsSelect = document.getElementById("themeFonts");
Object.keys(GC.Spread.Sheets.ThemeFonts).forEach(function(fontName) {
var option = document.createElement("option");
option.value = fontName;
option.text = fontName;
if (fontName === "Office") {
option.selected = true;
}
themeFontsSelect.appendChild(option);
});
themeFontsSelect.addEventListener("change", function () {
let selectedFont = themeFontsSelect.value;
let currentTheme = sheet.currentTheme();
let newTheme = new GC.Spread.Sheets.Theme();
newTheme.fromJSON(currentTheme.toJSON());
newTheme.font(GC.Spread.Sheets.ThemeFonts[selectedFont]);
newTheme.name('custom-theme');
sheet.currentTheme(newTheme);
});
// テーブルシートのテーマセレクター
var tableThemeSelect = document.getElementById("tableSheetTheme");
tableThemeSelect.addEventListener("change", function () {
let selectedTheme = tableThemeSelect.value;
sheet.applyTableTheme(GC.Spread.Sheets.Tables.TableThemes[selectedTheme]); // light1 - light21, medium1 - medium28, dark1 - dark11, professional1 - professional12
});
}
function getBaseApiUrl() {
var url = window.location.href;
return url.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
<!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">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<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-tablesheet/dist/gc.spread.sheets.tablesheet.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">
<div>
<label><b>ワークブックのテーマ:</b></label>
</div>
<div class="option-row">
<select id="workbookTheme"></select>
</div>
<hr>
<div>
<label><b>テーマの色:</b></label>
</div>
<div class="option-row">
<select id="themeColors"></select>
</div>
<hr>
<div>
<label><b>テーマのフォント:</b></label>
</div>
<div class="option-row">
<select id="themeFonts"></select>
</div>
<hr>
<div>
<label><b>テーブルシートのテーマ:</b></label>
</div>
<div class="option-row">
<select id="tableSheetTheme">
<optgroup label="ライトテーマ">
<option value="light1">light1</option>
<option value="light2">light2</option>
<option value="light3">light3</option>
<option value="light4">light4</option>
<option value="light5">light5</option>
<option value="light6">light6</option>
<option value="light7">light7</option>
<option value="light8">light8</option>
<option value="light9">light9</option>
<option value="light10">light10</option>
<option value="light11">light11</option>
<option value="light12">light12</option>
<option value="light13">light13</option>
<option value="light14">light14</option>
<option value="light15">light15</option>
<option value="light16">light16</option>
<option value="light17">light17</option>
<option value="light18">light18</option>
<option value="light19">light19</option>
<option value="light20">light20</option>
<option value="light21">light21</option>
</optgroup>
<optgroup label="ミディアムテーマ">
<option value="medium1">medium1</option>
<option value="medium2">medium2</option>
<option value="medium3">medium3</option>
<option value="medium4">medium4</option>
<option value="medium5">medium5</option>
<option value="medium6">medium6</option>
<option value="medium7">medium7</option>
<option value="medium8">medium8</option>
<option value="medium9">medium9</option>
<option value="medium10">medium10</option>
<option value="medium11">medium11</option>
<option value="medium12">medium12</option>
<option value="medium13">medium13</option>
<option value="medium14">medium14</option>
<option value="medium15">medium15</option>
<option value="medium16">medium16</option>
<option value="medium17">medium17</option>
<option value="medium18">medium18</option>
<option value="medium19">medium19</option>
<option value="medium20">medium20</option>
<option value="medium21">medium21</option>
<option value="medium22">medium22</option>
<option value="medium23">medium23</option>
<option value="medium24">medium24</option>
<option value="medium25">medium25</option>
<option value="medium26">medium26</option>
<option value="medium27">medium27</option>
<option value="medium28">medium28</option>
</optgroup>
<optgroup label="ダークテーマ">
<option value="dark1">dark1</option>
<option value="dark2">dark2</option>
<option value="dark3">dark3</option>
<option value="dark4">dark4</option>
<option value="dark5">dark5</option>
<option value="dark6">dark6</option>
<option value="dark7">dark7</option>
<option value="dark8">dark8</option>
<option value="dark9">dark9</option>
<option value="dark10">dark10</option>
<option value="dark11">dark11</option>
</optgroup>
<optgroup label="プロフェッショナルテーマ">
<option value="professional1" selected>professional1</option>
<option value="professional2">professional2</option>
<option value="professional3">professional3</option>
<option value="professional4">professional4</option>
<option value="professional5">professional5</option>
<option value="professional6">professional6</option>
<option value="professional7">professional7</option>
<option value="professional8">professional8</option>
<option value="professional9">professional9</option>
<option value="professional10">professional10</option>
<option value="professional11">professional11</option>
<option value="professional12">professional12</option>
<option value="professional13">professional13</option>
<option value="professional14">professional14</option>
<option value="professional15">professional15</option>
<option value="professional16">professional16</option>
<option value="professional17">professional17</option>
<option value="professional18">professional18</option>
<option value="professional19">professional19</option>
<option value="professional20">professional20</option>
<option value="professional21">professional21</option>
<option value="professional22">professional22</option>
<option value="professional23">professional23</option>
<option value="professional24">professional24</option>
</optgroup>
</select>
</div>
</div>
</div>
</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 {
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
