概述
本 Demo 展示了如何使用 SpreadJS API 动态管理工作簿中的工作表。通过按钮和输入框，演示了添加工作表、删除工作表、清除所有工作表、设置活动工作表以及更改工作表索引等常用操作。
实现思路
初始化工作簿并设置初始工作表数量为 3
绑定 ActiveSheetChanged 事件，在工作表切换时更新界面显示
实现添加工作表功能，在当前活动工作表之后插入新工作表
实现删除工作表功能，删除当前活动的工作表
实现清除所有工作表功能
通过输入框设置活动工作表索引，切换到指定的工作表
通过输入框更改工作表索引，调整工作表的排列顺序
代码解析
初始化工作簿和事件绑定
初始化时创建工作簿并设置 3 个工作表。通过绑定 ActiveSheetChanged 事件，在工作表切换时自动更新界面上的索引显示和工作表名称。
添加工作表
点击添加按钮时，获取当前活动工作表的索引，在其后一个位置添加新工作表，并将新工作表设置为活动状态。如果没有活动工作表，则在索引 0 处添加新工作表。
删除工作表
删除当前活动的工作表，删除后自动切换到相同索引位置的工作表（如果存在）。
清除所有工作表
调用 clearSheets() 方法清空工作簿中的所有工作表。
设置活动工作表
通过输入框设置活动工作表索引，验证索引的有效范围后切换到指定工作表。
更改工作表索引
通过输入工作表名称和目标索引，将指定的工作表移动到新的位置，实现工作表的重新排序。
运行效果
点击"添加工作表"按钮，在当前活动工作表后添加一个新工作表，并自动切换到新工作表
点击"删除工作表"按钮，删除当前活动的工作表
点击"清除所有工作表"按钮，清空工作簿中的所有工作表
在"活动工作表索引"输入框中输入索引值，点击"设置"按钮切换到指定的工作表
在"更改工作表索引"区域输入工作表名称和目标索引，点击"设置"按钮调整工作表的排列顺序
工作表切换时，界面会自动更新显示当前活动工作表的索引和名称
API 参考
setSheetCount 方法
count：工作表数量
addSheet 方法
index：插入位置的索引
sheet：可选，要插入的工作表对象
removeSheet 方法
index：要删除的工作表索引
clearSheets 方法
清除工作簿中的所有工作表。
setActiveSheetIndex 方法
value：活动工作表的索引
getActiveSheetIndex 方法
返回当前活动工作表的索引。
changeSheetIndex 方法
sheetName：工作表名称
targetIndex：目标索引位置
ActiveSheetChanged 事件
当用户切换活动工作表时触发。事件参数包含 oldSheet 和 newSheet 属性，分别表示旧工作表和新工作表对象。
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'));
var spreadNS = GC.Spread.Sheets;
spread.setSheetCount(3);
initSpread(spread);
spread.bind(spreadNS.Events.ActiveSheetChanged, function(e, args) {
_getElementById('activeSheetIndex').value = spread.getActiveSheetIndex();
_getElementById('changeSheetIndexName').value = spread.getActiveSheet().name();
});
_getElementById('btnAddSheet').addEventListener('click',function() {
var activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.addSheet(activeIndex+1);
spread.setActiveSheetIndex(activeIndex+1);
}
else{
spread.addSheet(0);
spread.setActiveSheetIndex(0);
}
});
_getElementById('btnRemoveSheet').addEventListener('click',function() {
var activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.removeSheet(activeIndex);
spread.setActiveSheetIndex(activeIndex);
}
});
_getElementById('btnClearSheets').addEventListener('click',function() {
spread.clearSheets();
});
_getElementById('btnSetActiveSheetIndex').addEventListener('click',function() {
var index = _getElementById('activeSheetIndex').value;
if (!isNaN(index)) {
index = parseInt(index);
if (0 <= index && index < spread.getSheetCount()) {
spread.setActiveSheetIndex(index);
}
}
});
_getElementById('btnChangeSheetIndex').addEventListener('click',function() {
var sheetName = _getElementById('changeSheetIndexName').value;
var targetIndex = _getElementById('changeSheetIndexTargetIndex').value;
if (!isNaN(targetIndex)) {
targetIndex = parseInt(targetIndex);
if (0 <= targetIndex && targetIndex <= spread.getSheetCount()) {
spread.changeSheetIndex(sheetName, targetIndex);
}
}
});
};
function initSpread(spread) {
}
function _getElementById(id){
return document.getElementById(id);
}
<!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$/spread/source/data/data.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>使用下方按钮添加、删除当前工作簿中的工作表或清除所有工作表。</label>
</div>
<div class="option-row">
<input type="button" value="添加工作表" id="btnAddSheet" />
<input type="button" value="删除工作表" id="btnRemoveSheet" />
<input type="button" value="清除所有工作表" id="btnClearSheets" />
</div>
<div class="option-row">
<label>活动工作表索引:</label>
<input type="text" id="activeSheetIndex" value="0" />
<input type="button" id="btnSetActiveSheetIndex" value="设置" />
</div>
<div class="option-row">
<label>此操作会将当前活动工作表切换到指定索引处的工作表。</label>
</div>
<div class="option-row">
<label>更改工作表索引</label>
<label>工作表名称:</label>
<input type="text" id="changeSheetIndexName" value="Sheet1" />
<label>目标索引:</label>
<input type="text" id="changeSheetIndexTargetIndex" value="2" />
<input type="button" id="btnChangeSheetIndex" value="设置" />
</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;
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: 3px;
margin-top: 3px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width: 100%;
text-align: center;
}
input[type=text] {
width: 230px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
