概述
本 Demo 展示了如何使用 SpreadJS 的表格管理 API 对表格进行各种操作，包括添加新表格、查找已有表格、移动表格位置、调整表格大小以及删除表格。Demo 提供了交互式界面，用户可以通过右侧面板的操作按钮实时体验这些功能。
实现思路
初始化时创建一个示例表格，并填充员工信息数据
监听选区变化事件，当选中表格内单元格时启用相关操作按钮
实现添加表格功能：根据当前选区创建新表格
实现移动表格功能：通过输入框指定目标位置（行、列）
实现调整大小功能：通过输入框指定新的行数和列数
实现删除表格功能：移除选中的表格
代码解析
创建表格
使用 add 方法创建表格，参数依次为：表格名称、起始行索引、起始列索引、行数、列数和表格样式。
查找表格
使用 find 方法通过单元格位置查找表格。如果该单元格属于某个表格，则返回该表格实例。
移动表格
使用 move 方法将表格移动到指定的行列位置。row 和 column 参数表示新的起始位置。
调整表格大小
使用 resize 方法调整表格大小。注意：Demo 中传递的参数是行数和列数，但根据 API 文档，resize 方法需要传递 Range 对象。
删除表格
使用 remove 方法删除指定的表格实例。
运行效果
页面加载后，工作表中显示一个包含员工信息的表格
点击表格内的任意单元格，右侧面板的"移除表格"、"移动表格"、"调整表格大小"按钮会被激活
在"移动表格"区域输入目标行和列，点击"移动表格"按钮，表格会移动到新位置
在"调整表格大小"区域输入新的行数和列数，点击"调整表格大小"按钮，表格尺寸会改变
选择任意空白区域，点击"添加表格"按钮，会在选区创建新表格
点击"移除表格"按钮，选中的表格会被删除
API 参考
add 方法
name：表格名称（可选）
row：起始行索引
column：起始列索引
rowCount：表格行数
columnCount：表格列数
style：表格样式，可以是样式名称或 TableTheme 对象
find 方法
row：行索引
column：列索引
返回包含指定单元格的表格实例
move 方法
table：表格实例或表格名称
row：新的起始行索引
column：新的起始列索引
resize 方法
table：表格实例或表格名称
range：新的表格范围（Range 对象）
remove 方法
table：表格实例或表格名称
options：移除选项，可指定是否保留数据或样式（可选）
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.bind(spreadNS.Events.SelectionChanged, selectionChangedCallback);
var table = sheet.tables.add("table1", 1, 1, 4, 4, spreadNS.Tables.TableThemes.light1);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);
sheet.getCell(1, 1).text("姓氏");
sheet.getCell(1, 2).text("名字");
sheet.getCell(1, 3).text("分数");
sheet.getCell(1, 4).text("职位");
sheet.getCell(2, 1).text("李");
sheet.getCell(2, 2).text("娜");
sheet.getCell(2, 3).text("90");
sheet.getCell(2, 4).text("网页开发人员");
sheet.getCell(3, 1).text("王");
sheet.getCell(3, 2).text("伟");
sheet.getCell(3, 3).text("70");
sheet.getCell(3, 4).text(".NET开发人员");
sheet.getCell(4, 1).text("张");
sheet.getCell(4, 2).text("敏");
sheet.getCell(4, 3).text("85");
sheet.getCell(4, 4).text("销售经理");
spread.resumePaint();
function selectionChangedCallback() {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table && table.name) {
_getElementById("removeTable").removeAttribute('disabled');
valueCheckCallback("moveRow", "moveColumn", "moveTable");
valueCheckCallback("resizeRow", "resizeColumn", "resizeTable");
} else {
_getElementById("removeTable").setAttribute('disabled', true);
_getElementById("moveTable").setAttribute('disabled', true);
_getElementById("resizeTable").setAttribute('disabled', true);
}
}
function valueCheckCallback(rowElementId, columnElementId, targetElementID) {
var rowInfo = parseInt(_getElementById("" + rowElementId).value);
var columnInfo = parseInt(_getElementById("" + columnElementId).value);
var targetElement = _getElementById("" + targetElementID);
if (isNaN(rowInfo) || isNaN(columnInfo)) {
targetElement.setAttribute('disabled', true);
} else {
targetElement.removeAttribute('disabled');
}
}
function removeTableFromOptionList(tableName) {
var removeNode = document.querySelector("option[value=" + tableName + "]");
if (removeNode) {
removeNode.parentNode.removeChild(removeNode);
}
}
//add table
_getElementById("addTable").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
try {
var cr = sheet.getSelections()[0];
if (cr) {
cr = getActualRange(cr, sheet.getRowCount(), sheet.getColumnCount());
var tableName = getTableName(sheet);
sheet.tables.add(tableName, cr.row, cr.col, cr.rowCount, cr.colCount, spreadNS.Tables.TableThemes.light1);
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
});
//remove table
_getElementById("removeTable").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
try {
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
sheet.tables.remove(table);
removeTableFromOptionList(table.name());
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
});
//move table
_getElementById("moveTable").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
var row = parseInt(_getElementById("moveRow").value);
var col = parseInt(_getElementById("moveColumn").value);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.move(table, row, col);
selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
});
_getElementById("moveRow").addEventListener('keyup',function () {
valueCheckCallback("moveRow", "moveColumn", "moveTable");
});
_getElementById("moveColumn").addEventListener('keyup',function () {
valueCheckCallback("moveRow", "moveColumn", "moveTable");
});
//resize table
_getElementById("resizeTable").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
var row = parseInt(_getElementById("resizeRow").value);
var col = parseInt(_getElementById("resizeColumn").value);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.resize(table, row, col);
selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
});
_getElementById("resizeRow").addEventListener('keyup',function () {
valueCheckCallback("resizeRow", "resizeColumn", "resizeTable");
});
_getElementById("resizeColumn").addEventListener('keyup',function () {
valueCheckCallback("resizeRow", "resizeColumn", "resizeTable");
});
function getTableName(sheet) {
var i = 0;
while (true) {
var name = "table" + i.toString();
if (!sheet.tables.findByName(name)) {
return name;
}
i++;
}
}
function getActualRange(range, maxRowCount, maxColCount) {
var row = range.row < 0 ? 0 : range.row;
var col = range.col < 0 ? 0 : range.col;
var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
var colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
}
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$/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-group">
<label> 请选择表格区域。</label>
<label> 表格名称:</label>
<input id="tableName" />
</div>
<div class="option-group">
<input type="button" id="removeTable" value="移除表格" />
<input type="button" id="addTable" value="添加表格" />
</div>
<hr>
<label>将表格移动到:</label>
<div class="option-group">
<label for="moveRow">行:</label>
<input id="moveRow" />
</div>
<div class="option-group">
<label for="moveColumn">列:</label>
<input id="moveColumn" />
</div>
<div class="option-group">
<input type="button" id="moveTable" value="移动表格" />
</div>
<label>调整表格大小:</label>
<div class="option-group">
<label for="resizeRow">行数:</label>
<input id="resizeRow" />
</div>
<div class="option-group">
<label for="resizeColumn">列数:</label>
<input id="resizeColumn" />
</div>
<div class="option-group">
<input type="button" id="resizeTable" value="调整表格大小" />
</div>
</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;
}
.option-group {
margin-bottom: 6px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 2px 4px;
width: 100%;
box-sizing: border-box;
}
input[type=button] {
margin-bottom: 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin: 5px 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
