概述
本 Demo 展示了 SpreadJS 表格的内置上下文菜单功能。创建表格后，用户可以右键单击表格中的任意单元格，在弹出的上下文菜单中选择插入或删除行和列，实现便捷的表格结构编辑。
实现思路
创建工作簿实例并获取活动工作表
使用 tables.add 方法创建一个 5 行 4 列的表格，指定表格名称和主题样式
设置各列的列宽，确保数据显示清晰
使用 getCell 方法为表格添加表头和数据
依赖 SpreadJS 的内置上下文菜单功能（默认启用），用户右键点击表格单元格时自动显示菜单
代码解析
创建表格
这段代码在工作表的第 1 行第 1 列位置创建了一个 5 行 4 列的表格。tables.add 方法的参数依次为：表格名称、起始行索引、起始列索引、行数、列数和表格主题样式。这里使用 light1 主题，表格会自动应用浅色样式。
设置列宽和数据
为表格的 4 列设置统一的 120 像素列宽，使数据显示更加美观。
使用 getCell 方法设置表格的表头和数据。表格的第 1 行作为表头，后续行填充示例数据。
运行效果
页面加载后显示一个包含员工信息的表格
在表格内任意单元格上右键单击，会弹出上下文菜单
菜单中包含插入行、删除行、插入列、删除列等选项
选择相应菜单项即可快速调整表格结构，操作类似 Excel 的体验
API 参考
tables.add 方法
name：表格名称（字符串）
row：起始行索引（数字）
column：起始列索引（数字）
rowCount：表格行数（数字）
columnCount：表格列数（数字）
style：表格主题样式，可以是主题名称字符串或 TableTheme 对象
allowContextMenu 属性
SpreadJS 的 spread.options.allowContextMenu 属性默认为 true，启用后会自动显示内置上下文菜单。表格区域会显示专门的表格编辑菜单项。
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.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("First Name");
sheet.getCell(1, 2).text("Last Name");
sheet.getCell(1, 3).text("Score");
sheet.getCell(1, 4).text("Position");
sheet.getCell(2, 1).text("Alexa");
sheet.getCell(2, 2).text("Wilder");
sheet.getCell(2, 3).text("90");
sheet.getCell(2, 4).text("Web Developer");
sheet.getCell(3, 1).text("Victor");
sheet.getCell(3, 2).text("Wooten");
sheet.getCell(3, 3).text("70");
sheet.getCell(3, 4).text(".NET Developer");
sheet.getCell(4, 1).text("Ifeoma");
sheet.getCell(4, 2).text("Mays");
sheet.getCell(4, 3).text("85");
sheet.getCell(4, 4).text("Sales Manager");
spread.resumePaint();
}
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>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width:100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
