可以参考下面的例子来创建区域模板类型：
API 定义：
行，列，行数，列数等这些参数是可选的， 它们用于创建模板区域，如果这些参数未被设置，则区域模板类型将使用整个工作表创建模板区域。 参考以下示例：
您可以在模板表单中自定义绑定路径或公式。 然后，区域模板类型将使用单元格值作为数据源来解析绑定路径或公式化指定区域。
条件规则区域，数据验证，迷你图数据区域，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="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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;
}
