The context menu provides the following abilities:
Theme is the same as the current spread theme. Change the filter context menu data result. Modify the menu view's appearance and structure.
You can use the spread.options.allowContextMenu option to control whether to show the built-in context menu or not.
var spread = GC.Spread.Sheets.findControl(document .getElementById('ss' ));
spread.options.allowContextMenu = false ;
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", "NewYork", "1968/6/8", "man", "80", "180"],
["Betty", "NewYork", "1972/7/3", "woman", "72", "168"],
["Cherry", "Washington", "1986/2/2", "woman", "58", "161"],
["Gary", "NewYork", "1964/3/2", "man", "71", "179"],
["Hunk", "Washington", "1972/8/8", "man", "80", "171"],
["Eva", "Washington", "1993/2/15", "woman", "71", "180"]
];
sheet.tables.addFromDataSource("table1", 1, 1, data);
sheet.getRange(-1, 1, -1, 6).width(80);
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]);
var i, j, cell;
for (i = 9; i < 13; i++) {
for (j = 3; j < 7; j++) {
cell = sheet.getCell(i, j);
cell.text(i * j + "");
}
}
sheet.setFormula(9, 7, "=SUM(D10:G10)");
cell = sheet.getCell(9, 8);
cell.text("0.234");
cell.formatter(new GC.Spread.Formatter.GeneralFormatter("0.00%"));
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 target = document.querySelector('link[href*="gc.spread.sheets"]');
var href = target.attributes["href"].value,
pos = href.indexOf("gc.spread.sheets"),
item = href.substr(0, pos) + this.value;
var head = document.getElementsByTagName('head')[0];
head.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);
}
}
Right click any cell to bring up its context menu. This menu is fully customizable.
Show Context Menu
Select Theme:
SpreadJS
White
Light Gray
Dark Gray
Colorful
Dark Gray
.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:lavender;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}