概述
本 Demo 展示了 SpreadJS 工作表数据操作的核心方法，包括单元格值的设置与获取、批量数据写入、数据区域的复制与移动，以及零值显示控制等功能。
实现思路
使用 setValue() 和 setText() 方法为单个单元格设置数据和文本
使用 setArray() 方法批量写入二维数组数据到指定区域
通过按钮事件演示 copyTo() 方法复制数据区域
通过按钮事件演示 moveTo() 方法移动数据区域
使用复选框控制 showZeros 选项，演示零值显示与隐藏效果
代码解析
设置单个单元格数据
setValue() 方法用于设置单元格的原始值（可以是数字、字符串、日期等），setText() 方法用于设置单元格的格式化文本。
批量设置数组数据
setArray() 方法可以将二维数组批量写入到工作表的指定位置，适用于大量数据的高效导入。相比多次调用 setValue()，使用 setArray() 可以显著提升性能。
复制数据区域
点击"复制"按钮时，调用 copyTo() 方法将数据从源区域（H2:J8）复制到目标区域（H11:J17）。参数依次为：源行、源列、目标行、目标列、行数、列数、复制选项。
移动数据区域
点击"移动"按钮时，调用 moveTo() 方法将数据从源区域（H1:J8）移动到目标区域（H10:J17）。移动后，源区域的数据将被清除。
控制零值显示
通过复选框控制 showZeros 选项。当取消勾选时，值为 0 的单元格将显示为空白，而不是显示数字 "0"。这仅影响显示效果，不影响实际值和计算结果。
运行效果
表格左侧展示了 setValue() 和 setText() 的区别，不同类型的数据以不同的方式设置
表格右侧展示了 setArray() 批量设置的数据区域（青色背景）
点击"复制"按钮，会将右侧青色区域的数据复制到下方粉色区域
点击"移动"按钮，会将整个数据区域（包含标题行）向下移动到粉色区域
取消勾选"显示零值单元格"复选框，值为 0 的单元格会显示为空白
API 参考
setValue 方法
row、col：单元格位置
value：要设置的值（可以是数字、字符串、日期、富文本对象等）
sheetArea：可选，指定工作表区域
ignoreRecalc：可选，是否忽略重新计算
setArray 方法
row、column：起始单元格位置
array：二维数组，包含要设置的值
setFormula：可选，是否设置为公式（默认为 false）
copyTo 方法
fromRow、fromColumn：源区域起始位置
toRow、toColumn：目标区域起始位置
rowCount、columnCount：要复制区域的行数和列数
option：复制选项，如 GC.Spread.Sheets.CopyToOptions.all
moveTo 方法
参数与 copyTo() 相同，区别在于移动后源区域数据会被清除。
showZeros 选项
控制是否在单元格中显示零值。默认为 true（显示 0），设置为 false 时零值显示为空白。
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setValue(1, 1, 'setValue');
sheet.setValue(1, 2, 2014);
sheet.setText(3, 1, 'setText');
sheet.setText(3, 2, '01/01/2014');
sheet.setText(5, 1, '0 Value');
sheet.setValue(5, 2, 0);
sheet.setColumnWidth(2, 90);
sheet.setColumnWidth(8, 120);
sheet.setColumnWidth(9, 120);
sheet.setValue(0, 7, 'setArray');
sheet.setArray(1, 7, [
[ 'ID', 'Phone Number', 'Address' ],
[ 1, '021-432378', 'Marbury Road' ],
[ 2, '021-432668', 'Chester Road' ],
[ 3, '021-432238', 'Gertt Road' ],
[ 4, '021-432533', 'Jnyliner Road' ],
[ 5, '021-432125', 'Approach Road' ],
[ 6, '021-432789', 'Jones Road' ]
]);
initStyle(sheet);
document.getElementById('btnCopy').addEventListener('click', function() {
sheet.copyTo(1, 7, 10, 7, 7, 3, spreadNS.CopyToOptions.all);
});
document.getElementById('btnMove').addEventListener('click', function() {
sheet.moveTo(0, 7, 9, 7, 8, 3, spreadNS.CopyToOptions.all);
});
document.getElementById('showZeros').addEventListener('change', function() {
spread.getActiveSheet().options.showZeros = this.checked;
});
sheet.resumePaint();
};
function initStyle (sheet) {
let style = new GC.Spread.Sheets.Style();
style.backColor = '#c6c0ca';
for (let row = 1; row < 6; row++) {
for (let col = 1; col < 3; col++) {
sheet.setStyle(row, col, style);
}
}
style = new GC.Spread.Sheets.Style();
style.backColor = '#bbd2cc';
for (let row = 1; row < 8; row++) {
for (let col = 7; col < 10; col++) {
sheet.setStyle(row, col, style);
}
}
style = new GC.Spread.Sheets.Style();
style.backColor = '#fcd8dd';
for (let row = 10; row < 17; row++) {
for (let col = 7; col < 10; col++) {
sheet.setStyle(row, col, style);
}
}
}
<!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">
<p>用户可以为工作表设置数据或从工作表获取数据。</p>
<p>点击“复制”按钮将把数据从H2:J8复制到H11:J17。</p>
<p>点击“移动”按钮将把数据从H1:J8移动到H10:J17。</p>
<input type="button" value="复制" id="btnCopy" />
<input type="button" value="移动" id="btnMove" />
<hr />
<input type="checkbox" class="usedRange" id="showZeros" checked />
<label for="showZeros" class="usedRange">显示零值单元格</label>
</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: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
margin-top: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: inline-block;
width: 85px;
}
.usedRange {
display: inline-block;
}
#btnCopy {
margin-right: 40px;
}
#data-used-range {
margin-left: 75px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
