범위 템플릿을 만들려면 다음 예제를 따릅니다.
다음은 API 정의입니다.
row, col, rowCount, colCount 매개 변수는 선택 사항이고, 템플릿 범위를 만드는 데 사용되며, 해당 매개 변수가 설정되지 않으면 RangeTemplate은 전체 시트를 사용하거나 템플릿 범위를 만듭니다. 예제는 다음과 같습니다.
템플릿 워크시트에서 bindingPath 또는 수식을 사용자 정의할 수 있습니다. 그런 다음, RangeTemplate은 셀 값을 데이터 원본으로 사용하여 지정된 범위의 bindingPath 또는 수식을 확인합니다.
조건 규칙 범위, datavalidation, 스파크라인 데이터 범위 및 날짜 범위, sparklineEx, 수식은 셀 또는 범위를 나타내며, 모든 항목은 템플릿 범위에 포함되어야 합니다. 그렇지 않으면 문제가 발생할 수 있습니다. 또한 템플릿 워크시트의 범위는 템플릿 범위 내에 완전히 포함되어야 합니다.
범위 템플릿은 다른 범위 템플릿을 지원하지 않으므로, 데이터가 손실되거나 무한 루프가 발생할 수 있습니다.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
};
function bindEvent(renderSheet, templateSheet) {
document.getElementById("update").onclick = function () {
var celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);
renderSheet.setCellType(-1, 0, celltype);
};
}
function initSpread(spread) {
var renderSheet = spread.getActiveSheet();
var templateSheet = new GC.Spread.Sheets.Worksheet();
templateSheet.fromJSON(templatesheetjson);
spread.addSheet(1,templateSheet);
templateSheet.setFormatter(2,2,"=IMAGE(@)");
bindEvent(renderSheet, templateSheet);
renderSheet.suspendPaint();
var celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);
renderSheet.autoGenerateColumns = false;
renderSheet.setDataSource(data);
var cardInfo = {
displayName: "Person Card",
size: 440,
value: function (item) {
return item;
},
cellType: celltype
};
renderSheet.defaults.rowHeight = 207;
renderSheet.bindColumn(0, cardInfo);
renderSheet.bindColumn(1, { displayName: "Name", name: 'fullName', size: 150 });
renderSheet.bindColumn(2, { displayName: "Phone", name: 'phone', size: 150 });
renderSheet.bindColumn(3, { displayName: "Email", name: 'email', size: 360 });
renderSheet.bindColumn(4, { displayName: "Registered Date", name: 'registered.date', size: 240 });
renderSheet.resumePaint();
}
<!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">
<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/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/rangecelltype-data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/rangecelltype-templatesheet.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="option-row">
<p>In this example, you can change the template label text. Switch to the Template sheet, change the Email or Phone text, then press Update RangeTemplate to apply your changes to the template. You can switch back to Sheet1 to view your changes.</p>
<input type="button" id="update" value="Update RangeTemplate"/>
</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;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
padding-bottom: 8px;
}
label {
padding-bottom: 4px;
display: block;
}
input {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}