이 샘플은 통합 문서 수준 테마와 테이블별 테마를 사용하여 테이블 시트에 테마를 적용하는 방법을 보여 줍니다.
통합 문서 테마
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;
//init a data manager
var baseApiUrl = getBaseApiUrl();
var dataManager = spread.dataManager();
//add product table
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: baseApiUrl + "/Supplier"
}
}
});
//init a table sheet
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);
//bind a view to the table sheet
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 :"Title" },
{ value: "Address", width: 200 },
{ value: "City", width: 150, caption :"City" },
{ value: "State", width: 100, caption :"State" },
{ value: "Region", width: 100, caption :"Region" }
]);
sheet.setDataView(view);
});
spread.resumePaint();
// Populate Workbook Theme options
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);
});
// Populate Theme Colors options
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);
});
// Populate Theme Fonts options
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);
});
// TableSheet Theme selector
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() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ko/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$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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>TableSheet 테마:</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;
}
