다음 단계에 따라 Spread를 참조하고 시트 작업을 합니다.
다른 라이브러리와 유사하게 시트에는 다음과 같은 포함 파일이 필요합니다:
gc.spread.sheets.x.x.x.css
gc.spread.sheets.all.x.x.x.min.js
다음 코드를 사용하여 시트를 만듭니다(매개 변수는 시트의 이름입니다).
기존 Spread 컴포넌트의 지정된 위치에 해당 시트를 추가합니다.
Spread 컴포넌트에서 기존 시트를 제거하려면 다음 코드를 사용합니다. 이 예 코드는 Spread에서 첫 번째 시트를 제거합니다.
Spread 컴포넌트의 모든 시트를 제거하려면 편리한 clearSheets 메서드를 사용합니다.
시트의 이름을 사용자 정의하려면 name 메서드를 사용하여 시트 이름을 가져오고 설정합니다.
기본 제공 명령을 실행하여 시트 탭에서 활성 시트 이름 편집을 시작할 수도 있습니다.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'));
initSpread(spread);
_getElementById('btnAddSheet').addEventListener('click', function() {
var activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.addSheet(activeIndex+1);
spread.setActiveSheetIndex(activeIndex+1);
}
else{
spread.addSheet(0);
spread.setActiveSheetIndex(0);
}
});
_getElementById('btnRemoveSheet').addEventListener('click', function() {
if (spread.getSheetCount() > 0) {
spread.removeSheet(spread.getActiveSheetIndex());
}
});
_getElementById('btnClearSheets').addEventListener('click', function() {
spread.clearSheets();
});
_getElementById('btnStartEditSheetName').addEventListener('click', function() {
spread.commandManager().execute({ cmd: 'startEditSheetName' });
});
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr" />
<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">
<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-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/data.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 class="panel-title">Sheet Operations</div>
<div class="panel-description">Manage worksheets and start editing the active sheet tab name.</div>
<div class="option-row">
<span>Adds a sheet after the active one.</span>
<input type="button" value="Add Sheet" id="btnAddSheet"/>
</div>
<div class="option-row">
<span>Removes the active sheet.</span>
<input type="button" value="Remove Sheets" id="btnRemoveSheet"/>
</div>
<div class="option-row">
<span>Clears all the sheets from the workbook.</span>
<input type="button" value="Remove All Sheets" id="btnClearSheets"/>
</div>
<div class="option-row">
<span>Starts editing the active sheet name.</span>
<input type="button" value="Start Editing" id="btnStartEditSheetName"/>
</div>
</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: 18px 16px;
height: 100%;
box-sizing: border-box;
background: #f7f9fc;
border-left: 1px solid #d7dee8;
overflow: auto;
color: #263445;
}
.panel-title {
margin-bottom: 6px;
color: #172033;
font-size: 18px;
font-weight: 600;
}
.panel-description {
margin-bottom: 16px;
color: #5c6b7a;
font-size: 13px;
line-height: 1.45;
}
.option-row {
margin-bottom: 12px;
padding: 12px;
border: 1px solid #dfe5ee;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
font-size: 14px;
line-height: 1.35;
}
.option-row span {
display: block;
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 6px 10px;
}
input[type=button] {
display: block;
width: 100%;
border: 1px solid #9bb2cf;
border-radius: 4px;
background: #fff;
color: #1f4f82;
cursor: pointer;
font-weight: 600;
}
input[type=button]:hover {
background: #edf5ff;
border-color: #6f98c8;
}
input[type=button]:focus {
outline: 2px solid #8ec5ff;
outline-offset: 1px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
