You can bind sheet events using the bind and unbind methods for the sheet. You can also use the unbindAll method to unbind all the events. As with jQuery's bind and unbind, you can handle the sheet's bind and unbind, as shown in the following code:
When you want to perform tasks that might trigger several events, and you don't want the sheet to trigger these events, use the suspendEvent method to keep the events from occurring. After the tasks are complete, you can use the resumeEvent method to resume triggering events, as shown in the following example:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div id="statusBar"></div>
<div class="options-container">
<div class="option-row">
<label class='labelStyle' id="status">{{ labelValue }}</label>
</div>
<div class="option-row">
<textarea v-model="textareaValue" id="showSheetEvents" cols="40" rows="5" style=" width: 80%"></textarea>
</div>
</div>
</div>
</template>
<script setup>
import { shallowRef, ref, watch } from "vue";
import "@mescius/spread-sheets-vue";
import GC from '@mescius/spread-sheets';
const spreadRef = shallowRef(null);
const labelValue = ref('Editor Status: Ready!');
const textareaValue = ref('Cell is not being edited.');
let initSpread = function (spread) {
spreadRef.value = spread;
//init Status Bar
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
document.getElementById('statusBar')
);
statusBar.bind(spread);
let sheet = spread.getSheet(0);
sheet.suspendPaint();
setStatus(sheet);
sheet.setValue(2, 2, "Click me and input a char with your keyboard!");
sheet.addSpan(2, 2, 1, 5);
sheet.getRange(2, 2, 1, 5).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheet.setValue(4, 2, "Double-click the empty cell with the black border!");
sheet.addSpan(4, 2, 1, 5);
sheet.addSpan(5, 2, 1, 5);
sheet.getRange(5, 2, 1, 5).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheet.setValue(7, 2, "Double-click me!");
sheet.addSpan(7, 2, 1, 5);
sheet.getRange(7, 2, 1, 5).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheet.setValue(9, 2, "Double-click the empty cell with the black border and click it again!");
sheet.addSpan(9, 2, 1, 7);
sheet.addSpan(10, 2, 1, 5);
sheet.getRange(10, 2, 1, 5).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheet.setValue(12, 2, "Press the F2 key to start editing the empty cell with the black border, then press F2 to switch the editor status.");
sheet.addSpan(13, 2, 1, 5);
sheet.getRange(13, 2, 1, 5).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheet.resumePaint();
sheet.bind(GC.Spread.Sheets.Events.ColumnChanging, function (sender, info) {
//insert column
if (info.propertyName === "addColumns") {
textareaValue.value = ("ColumnChanging: addColumns(" + "column: " + info.col + ")");
labelValue.value = ("ColumnChanging event called!");
}
//delete column
if (info.propertyName === "deleteColumns") {
textareaValue.value = ("ColumnChanging: deleteColumns(" + "column: " + info.col + ")");
labelValue.value = ("ColumnChanging event called!");
}
//unhide column
if (info.propertyName === "isVisible" && info.newValue === true) {
textareaValue.value = ("ColumnChanging: unhide column(" + "column: " + info.col + ")");
labelValue.value = ("ColumnChanging event called!");
}
//hide column
if (info.propertyName === "isVisible" && info.newValue === false) {
textareaValue.value = ("ColumnChanging: hide column(" + "column: " + info.col + ")");
labelValue.value = ("ColumnChanging event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.ColumnChanged, function (sender, info) {
//insert column
if (info.propertyName === "addColumns") {
textareaValue.value = ("ColumnChanged: insert column(" + "column: " + info.col + ")");
labelValue.value = ("ColumnChanged event called!");
}
//delete column
if (info.propertyName === "deleteColumns") {
textareaValue.value = ("ColumnChanged: deleteColumns(" + "column: " + info.col + ")");
labelValue.value = ("ColumnChanged event called!");
}
//unhide column
if (info.propertyName === "isVisible" && info.newValue === true) {
textareaValue.value = ("ColumnChanged: unhide column(" + "column: " + info.col + ")");
labelValue.value = ("ColumnChanged event called!");
}
//hide column
if (info.propertyName === "isVisible" && info.newValue === false) {
textareaValue.value = ("ColumnChanged: hide column(" + "column: " + info.col + ")");
labelValue.value = ("ColumnChanged event called!");
}
});
//RowChanging
sheet.bind(GC.Spread.Sheets.Events.RowChanging, function (sender, info) {
//insert row
if (info.propertyName === "addRows") {
textareaValue.value = ("RowChanging: insert row(" + "row: " + info.row + ")");
labelValue.value = ("RowChanging event called!");
}
//delete row
if (info.propertyName === "deleteRows") {
textareaValue.value = ("RowChanging: delete row(" + "row: " + info.row + ")");
labelValue.value = ("RowChanging event called!");
}
//unhide row
if (info.propertyName === "isVisible" && info.newValue === true) {
textareaValue.value = ("RowChanging: unhide row(" + "row: " + info.row + ")");
labelValue.value = ("RowChanging event called!");
}
//hide row
if (info.propertyName === "isVisible" && info.newValue === false) {
textareaValue.value = ("RowChanging: hide row(" + "row: " + info.row + ")");
labelValue.value = ("RowChanging event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (sender, info) {
//insert row
if (info.propertyName === "addRows") {
textareaValue.value = ("RowChanged: insert row(" + "row: " + info.row + ")");
labelValue.value = ("RowChanged event called!");
}
//delete row
if (info.propertyName === "deleteRows") {
textareaValue.value = ("RowChanged: delete row(" + "row: " + info.row + ")");
labelValue.value = ("RowChanged event called!");
}
//unhide row
if (info.propertyName === "isVisible" && info.newValue === true) {
textareaValue.value = ("RowChanged: unhide row(" + "row: " + info.row + ")");
labelValue.value = ("RowChanged event called!");
}
//hide row
if (info.propertyName === "isVisible" && info.newValue === false) {
textareaValue.value = ("RowChanged: hide row(" + "row: " + info.row + ")");
labelValue.value = ("RowChanged event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.EditorStatusChanged, function () {
setStatus(sheet);
});
sheet.bind(GC.Spread.Sheets.Events.SelectionChanging, function (e, info) {
textareaValue.value = ("New Selection(" + "row: " + info.newSelections[0].row + ", " + "column: " + info.newSelections[0].col + ", " + "rowCount: " + info.newSelections[0].rowCount + ", " + "columnCount: " + info.newSelections[0].colCount + ")");
labelValue.value = ("SelectionChanging event called!");
});
}
function setStatus(sheet) {
let statusNow = sheet.editorStatus();
if (statusNow === GC.Spread.Sheets.EditorStatus.ready) {
textareaValue.value = ("Cell is not being edited.");
labelValue.value = ("Editor Status: Ready!");
} else if (statusNow === GC.Spread.Sheets.EditorStatus.enter) {
textareaValue.value = ("Cell is being edited, you can leave the cell by pressing one of the arrow keys.");
labelValue.value = ("Editor Status: Enter!");
} else if (statusNow === GC.Spread.Sheets.EditorStatus.edit) {
textareaValue.value = ("Cell is being edited, you can not leave the cell by pressing one of the arrow keys.");
labelValue.value = ("Editor Status: Edit!");
}
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: calc(100% - 25px);
overflow: hidden;
float: left;
}
#statusBar {
bottom: 0;
height: 25px;
width: 100%;
position: relative;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script src="$DEMOROOT$/spread/source/data/outlineColumn-wbs.js" type="text/javascript"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.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",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
