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.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="options-row">
<p>Right click any cell to bring up its context menu. This menu is fully customizable.</p>
</div>
<div class="options-row">
<input type="checkbox" id="allowContextMenu" v-model="allowContextMenu" />
<label for="allowContextMenu">Show Context Menu</label>
</div>
<div class="option-row">
<label for="currentThemes">Select Theme:</label>
<select id="currentThemes" @change="changeSpreadTheme($event)" >
<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>
</template>
<script>
import Vue from "vue";
import "@mescius/spread-sheets-vue";
import GC from "@mescius/spread-sheets";
import "./styles.css";
let spreadNS = GC.Spread.Sheets;
let App = Vue.extend({
name: "app",
data: function() {
return {
spread: GC.Spread.Sheets.Workbook,
allowContextMenu: true
};
},
watch: {
allowContextMenu: function(isChecked) {
let spread = this.spread,
allowContextMenu = isChecked;
spread.options.allowContextMenu = allowContextMenu;
}
},
methods: {
initSpread: function(spread) {
this.spread = spread;
let sheet = spread.getActiveSheet();
sheet.suspendPaint();
let dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];
let 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");
let 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();
},
changeSpreadTheme: function($event) {
let spread = this.spread;
var header = document.getElementsByTagName('head')[0];
var target = document.querySelector('link[href*="gc.spread.sheets"]');
var value = $event.target.value;
var href = target.href,
pos = href.indexOf('gc.spread.sheets'),
item = href.substr(0, pos) + value;
header.removeChild(target);
if (item) {
this.addThemeLink(item);
} else {
spread.refresh();
}
},
addThemeLink: function(href) {
let spread = this.spread;
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);
}
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<!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/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/outlineColumn.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/en/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></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;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
display: inline-block;
}
input[type="text"] {
width: 200px;
}
input[type="button"] {
padding: 4px 6px;
width: 100%;
margin-bottom: 10px;
}
label {
display: inline-block;
font-size: 13px;
}
p{
padding:2px 10px;
background-color:#F4F8EB;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.desc {
padding: 2px 10px;
background-color: #F4F8EB;
}
.loginBox {
position: absolute;
left: 35%;
top: 30%;
background-color: white;
padding: 20px;
border: 1px solid #c6c6c6;
box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 5px;
z-index: 2000;
height: 100px;
width: 200px;
}
.loginBoxLabel {
display: inline-block;
width: 200px;
text-align: center;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.js',
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);
