概述
本 Demo 展示了 SpreadJS 的单引号前缀功能。当输入值以单引号（'）开头时，SpreadJS 会将输入内容作为文本字符串处理，而不会自动解析为数字或日期类型。
实现思路
创建 SpreadJS Workbook 实例和公式文本框
设置表格基础结构（列宽、标签等）
使用 editCell 命令设置四个单元格的值，对比普通输入和带单引号前缀输入的差异
第一组对比：数字 12 和字符串 '12
第二组对比：日期时间和字符串日期时间
代码解析
使用 editCell 命令设置单元格值
Demo 通过 editCell 命令模拟用户在单元格中输入内容。当 newValue 以单引号开头时（如 "'12"），SpreadJS 会识别单引号前缀，将后续内容作为文本存储，单引号本身不会显示在单元格中。
对比日期时间值的处理
通过对比可以清晰看到，单引号前缀可以阻止 SpreadJS 自动解析日期时间格式，使其保持为原始字符串。
运行效果
表格第 3 行第 3 列显示数字 12（数值类型），第 4 行第 3 列显示文本 "12"（字符串类型）
表格第 5 行第 3 列显示格式化后的日期时间，第 6 行第 3 列显示原始日期时间字符串
在公式栏中可以查看单元格的实际存储值类型差异
单引号前缀使输入内容保持原始文本格式，不被自动转换
API 参考
editCell 命令
sheetName：工作表名称
row：单元格的行索引
col：单元格的列索引
newValue：单元格的新值
autoFormat：可选，是否自动格式化新值
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
initFunction(spread);
};
function initFunction(spread) {
var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById('formulaBar'));
fbx.workbook(spread);
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setColumnWidth(1, 100);
sheet.setColumnWidth(2, 300);
sheet.setValue(1, 0, '示例:');
sheet.setValue(2, 1, '普通');
sheet.setValue(3, 1, '引号前缀');
sheet.setValue(4, 1, '普通');
sheet.setValue(5, 1, '引号前缀');
spread.commandManager().execute({
cmd: "editCell",
sheetName: "Sheet1",
row: 2,
col: 2,
newValue: "12"
});
spread.commandManager().execute({
cmd: "editCell",
sheetName: "Sheet1",
row: 3,
col: 2,
newValue: "'12"
});
spread.commandManager().execute({
cmd: "editCell",
sheetName: "Sheet1",
row: 4,
col: 2,
newValue: "4/2/2020 13:39:48"
});
spread.commandManager().execute({
cmd: "editCell",
sheetName: "Sheet1",
row: 5,
col: 2,
newValue: "'4/2/2020 13:39:48"
});
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="formulaBar" contenteditable="true" spellcheck="false" style="border: 1px solid grey;
height: 21px;
width: 100%;
overflow: hidden;
font-size: 13px;
font-family: arial, sans, sans-serif;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px"></div>
<div id="ss" style="width:100%; height:100%; border: 1px solid gray;"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
