概述
本 Demo 展示了 SpreadJS 内置上下文菜单的基本功能，包括右键菜单的自动显示、通过选项控制菜单的开关，以及在不同主题下菜单样式的自动适配。
实现思路
初始化工作簿并加载示例数据表格
监听复选框的变化，动态控制上下文菜单的显示状态
监听主题选择器的变化，动态切换工作簿主题，观察上下文菜单样式随主题变化
代码解析
控制上下文菜单显示
这段代码通过监听复选框的变化，动态设置 spread.options.allowContextMenu 属性。该属性默认为 true，设置为 false 时将禁用上下文菜单。
动态切换主题
这段代码实现了动态切换主题的功能。通过修改页面中引用的主题 CSS 文件，然后在样式加载完成后调用 spread.refresh() 方法刷新工作簿，使新主题生效。上下文菜单的样式会自动跟随主题变化。
运行效果
在表格任意位置右键点击，会弹出与 Excel 类似的上下文菜单，菜单内容根据点击区域自动调整（如单元格、表头等区域会显示不同的菜单项）
取消勾选「显示上下文菜单」复选框，再次右键点击将不会弹出菜单
通过主题选择器切换不同的 Excel 主题，观察上下文菜单的颜色和样式随主题自动变化
勾选复选框后，右键菜单功能恢复正常
API 参考
allowContextMenu 选项
默认值为 true，允许显示上下文菜单
设置为 false 时禁用上下文菜单功能
refresh 方法
手动刷新 Workbook 对象的布局和渲染。当修改主题或样式后，需要调用此方法使更改生效。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 2
});
initSpread(spread);
};
function initSpread(spread) {
initWorkbook(spread);
initEvents(spread);
}
function initWorkbook(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];
var data = [
["Bob", "New York", "1968/6/8", "M", "80", "180"],
["Betty", "New York", "1972/7/3", "F", "72", "168"],
["Cherry", "Washington", "1986/2/2", "F", "58", "161"],
["Gary", "New York", "1964/3/2", "M", "71", "179"],
["Hunk", "Washington", "1972/8/8", "M", "80", "171"],
["Eva", "Washington", "1993/2/15", "F", "71", "180"]
];
sheet.tables.addFromDataSource("table1", 1, 1, data, GC.Spread.Sheets.Tables.TableThemes.medium7);
sheet.getRange(-1, 1, -1, 6).width(80);
sheet.getRange(2, 3, 6, 1).formatter("mm-dd-yyyy");
var table = sheet.tables.findByName("table1");
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
table.setColumnName(5, dataColumns[5]);
sheet.resumePaint();
}
function initEvents(spread) {
document.getElementById('allowContextMenu').onchange = function (e) {
var allowContextMenu = e.target.checked;
spread.options.allowContextMenu = allowContextMenu;
};
document.getElementById('currentThemes').onchange = function () {
var header = document.getElementsByTagName('head')[0];
var target = document.querySelector('link[href*="gc.spread.sheets"]');
var href = target.href,
pos = href.indexOf('gc.spread.sheets'),
item = href.substr(0, pos) + this.value;
header.removeChild(target);
if (item) {
addThemeLink(item);
} else {
spread.refresh();
}
};
function addThemeLink(href) {
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.onload = function () {
spread.refresh();
};
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
}
<!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>
<div class="sp-demo-childBlock">
<div id="settingsDiv">
<div class="option-row">
<input type="checkbox" id="allowContextMenu" checked="checked" />
<label for="allowContextMenu">显示上下文菜单</label>
</div>
<div class="option-row">
<label for="currentThemes">选择主题：</label>
<select id="currentThemes">
<optgroup label="SpreadJS">
<option value="gc.spread.sheets.css">SpreadJS</option>
</optgroup>
<optgroup label="Excel2013">
<option value="gc.spread.sheets.excel2013white.css" selected="selected">白色</option>
<option value="gc.spread.sheets.excel2013lightGray.css">浅灰色</option>
<option value="gc.spread.sheets.excel2013darkGray.css">深灰色</option>
</optgroup>
<optgroup label="Excel2016">
<option value="gc.spread.sheets.excel2016colorful.css">多彩</option>
<option value="gc.spread.sheets.excel2016darkGray.css">深灰色</option>
<option value="gc.spread.sheets.excel2016black.css">黑色</option>
</optgroup>
</select>
</div>
</div>
</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;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
}
p{
padding:2px 10px;
background-color:#F4F8EB;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
