Overview

SpreadJS supports built-in context menus, the context menu can be opened by right-clicking on the SpreadJS instance. The contents of this menu depend on which area of the workbook is clicked.

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.
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); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.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>Right click any cell to bring up its context menu. This menu is fully customizable.</p> <div class="sp-demo-childBlock"> <div id="settingsDiv"> <div class="option-row"> <input type="checkbox" id="allowContextMenu" checked="checked"/> <label for="allowContextMenu">Show Context Menu</label> </div> <div class="option-row"> <label for="currentThemes">Select Theme:</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">White</option> <option value="gc.spread.sheets.excel2013lightGray.css">Light Gray</option> <option value="gc.spread.sheets.excel2013darkGray.css">Dark Gray</option> </optgroup> <optgroup label="Excel2016"> <option value="gc.spread.sheets.excel2016colorful.css">Colorful</option> <option value="gc.spread.sheets.excel2016darkGray.css">Dark Gray</option> <option value="gc.spread.sheets.excel2016black.css">Black</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:lavender; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }