概述
本 Demo 展示了如何使用 SpreadJS 的 Workbook API 对工作表进行动态管理,包括添加新工作表、删除当前工作表和清空所有工作表。通过三个按钮分别演示了这些核心操作,帮助开发者理解工作表的初始化和管理流程。
实现思路
创建 Workbook 实例并初始化活动工作表
为"添加工作表"按钮绑定点击事件,在当前活动工作表之后插入新工作表并切换为活动状态
为"删除工作表"按钮绑定点击事件,删除当前活动工作表
为"删除所有工作表"按钮绑定点击事件,清空整个工作簿
代码解析
创建 Workbook 实例
这行代码创建了一个 SpreadJS 工作簿实例,传入的参数是页面中用于承载工作簿的 DOM 元素。
添加工作表
这段代码实现了添加工作表的功能。首先通过 getActiveSheetIndex() 获取当前活动工作表的索引,然后调用 addSheet() 方法在指定位置插入新工作表。如果当前有活动工作表,则在它之后插入;如果工作簿为空,则在索引 0 处插入。最后通过 setActiveSheetIndex() 将新添加的工作表设置为活动状态。
删除当前工作表
删除工作表前先通过 getSheetCount() 检查工作簿中是否还有工作表,避免在没有工作表时执行删除操作。removeSheet() 方法需要传入要删除的工作表索引,这里传入当前活动工作表的索引。
清空所有工作表
clearSheets() 方法会一次性删除工作簿中的所有工作表。
运行效果
点击"添加工作表"按钮,会在当前活动工作表之后插入一个新的空白工作表,并自动切换到新工作表
点击"删除工作表"按钮,会删除当前活动的工作表
点击"删除所有工作表"按钮,会清空工作簿中的所有工作表
所有操作都会实时反映在工作簿底部的标签栏中
API 参考
addSheet 方法
index: 要添加工作表的索引位置
sheet: 可选,要添加的工作表对象。如果不传入此参数,会创建一个空白工作表
removeSheet 方法
index: 要删除的工作表索引
clearSheets 方法
清除工作簿中的所有工作表,无参数。
getActiveSheetIndex 方法
返回当前活动工作表的索引,返回值为 number 类型。
setActiveSheetIndex 方法
value: 要设置为活动工作表的索引
getSheetCount 方法
返回工作簿中工作表的总数,返回值为 number 类型。
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'));
initSpread(spread);
_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() {
if (spread.getSheetCount() > 0) {
spread.removeSheet(spread.getActiveSheetIndex());
}
});
_getElementById('btnClearSheets').addEventListener('click', function() {
spread.clearSheets();
});
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
}
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">
在活动工作表之后添加一个工作表 <input type="button" value="添加工作表" id="btnAddSheet" />
<br>
删除活动工作表 <input type="button" value="删除工作表" id="btnRemoveSheet" />
<br>
清除工作簿中的所有工作表 <input type="button" value="删除所有工作表" id="btnClearSheets"/>
</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;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
