概述
本 Demo 展示了单元格标签在不同操作中的行为特性。通过为单元格设置不同类型的标签数据（字符串、数字、对象、日期），演示了标签在剪切、复制、粘贴、拖拽填充等操作中的移动和复制行为，以及如何通过事件监听显示当前单元格的标签信息。
实现思路
初始化 Spread 实例，设置默认拖拽填充类型为 copyCells，确保拖拽填充时复制标签
使用 setArray 方法设置基础表格数据
为不同的单元格设置不同类型的标签（字符串、数字、对象、日期）
为有标签的单元格设置背景色以突出显示
绑定 EnterCell 事件，当用户选中单元格时自动显示其标签内容
代码解析
设置不同类型的标签
这段代码演示了如何使用 setTag 方法为单元格设置不同类型的标签。标签可以是任意类型的数据（字符串、数字、对象、日期等），并且对用户不可见。
监听 EnterCell 事件显示标签
这段代码绑定 EnterCell 事件，当用户选中单元格时，获取该单元格的标签并显示在文本框中。如果标签是字符串则直接显示，如果是对象类型则使用 JSON.stringify 转换为字符串显示。
设置拖拽填充类型
设置默认拖拽填充类型为 copyCells，确保拖拽填充时标签数据会被复制而不是移动。
运行效果
表格中灰色背景的单元格包含不同类型的标签数据
点击任意单元格，下方的文本框会显示该单元格的标签内容
字符串标签和数字标签直接显示，对象标签以 JSON 格式显示
复制粘贴带有标签的单元格时，标签数据会一起被复制
剪切或拖拽带有标签的单元格时，标签数据会随单元格一起移动
撤销和恢复操作会同时应用于标签数据
API 参考
setTag 方法
row：行索引
col：列索引
tag：要设置的标签值，可以是任意类型（字符串、数字、对象、日期等）
sheetArea：可选，工作表区域
getTag 方法
返回指定单元格的标签值。
EnterCell 事件
当焦点进入单元格时触发，事件参数包含：
sheet：触发事件的工作表
sheetName：工作表名称
row：进入的单元格行索引
col：进入的单元格列索引
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets,
sheet = spread.sheets[0];
sheet.suspendPaint();
// set drag fill type to CopyCells in order to demo tag will be copied
spread.options.defaultDragFillType = spreadNS.Fill.AutoFillType.copyCells;
sheet.setArray(3, 1, [["a", 1], ["b", 2], ["c", 3]]);
sheet.setTag(3, 1, "'a' 的标签");
sheet.getCell(3, 1).backColor("#E3E3E3");
sheet.setTag(4, 2, "数字标签");
sheet.getCell(4, 2).backColor("#E3E3E3");
sheet.setTag(4, 1, { row: 12, column: 2 });
sheet.getCell(4, 1).backColor("#E3E3E3");
sheet.setTag(5, 2, new Date(Date.UTC(2014, 7, 12)));
sheet.getCell(5, 2).backColor("#E3E3E3");
sheet.bind(spreadNS.Events.EnterCell, function () {
var tag = sheet.getTag(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (tag == null) {
document.getElementById('txtTag').value = "";
}
else if (typeof tag === "string") {
document.getElementById('txtTag').value = tag;
} else {
document.getElementById('txtTag').value = JSON.stringify(tag);
}
});
sheet.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="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">
<label for="txtTag">选中的单元格标签: </label>
<input type="text" id="txtTag" style="width: 200px" />
</div>
<p style="background-color:#F4F8EB;padding: 4px;">
选择上面突出显示的单元格，使用自定义字符串格式获取其单元格标签。您还可以复制和粘贴带有标签的单元格。<br />
注意: 此演示中将 defaultDragFillType 设置为 copyCells。
</p>
</div>
</div>
</body>
</html>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.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 {
display: inline-block;
margin-right: 6px;
}
input {
padding: 4px;
margin: 0 4px 4px 0;
}
p {
background-color: #F4F8EB;
padding: 4px;
}
p span {
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
