You can get or set the selected state of a worksheet using the isSelected method, for example:
The active sheet is always selected and cannot be set to unselected.
If you set active sheet as unselected using the isSelected method, the active but not selected sheet will have another sheet tab view.
You can also change the selected state for a sheet or sheets by clicking with shift/ctrl key (in MacOS you need to use shift/command key instead).
Spread also provides two events when changing the selected state of a sheet.
Spread supports batch delete and hide functions of multiple selected sheets.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<p>Click the checkbox to select or deselect the sheet.</p>
<p>Hold down the Shift/Ctrl/Cmd key and click the sheet tab to select/deselect multiple sheets. The sheet checkbox will update correspondingly.</p>
</div>
<div class="sheets-checkboxes-container">
<div class="option-row">
<input type="checkbox" id="Sheet1" :checked="sheet1IsSelected" @change="onChange" />
<label for="Sheet1" id="labelOfSheet1">Sheet1</label>
</div>
<div class="option-row">
<input type="checkbox" id="Sheet2" :checked="sheet2IsSelected" @change="onChange" />
<label for="Sheet2" id="labelOfSheet2">Sheet2</label>
</div>
<div class="option-row">
<input type="checkbox" id="Sheet3" :checked="sheet3IsSelected" @change="onChange" />
<label for="Sheet3" id="labelOfSheet3">Sheet3</label>
</div>
<div class="option-row">
<input type="checkbox" id="Sheet4" :checked="sheet4IsSelected" @change="onChange" />
<label for="Sheet4" id="labelOfSheet4">Sheet4</label>
</div>
<div class="option-row">
<input type="checkbox" id="Sheet5" :checked="sheet5IsSelected" @change="onChange" />
<label for="Sheet5" id="labelOfSheet5">Sheet5</label>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import '@mescius/spread-sheets-vue'
import GC from '@mescius/spread-sheets';
import './styles.css';
let App = Vue.extend({
name: "app",
data: function () {
return {
spread: null,
sheet1IsSelected: true,
sheet2IsSelected: true,
sheet3IsSelected: true,
sheet4IsSelected: false,
sheet5IsSelected: false
};
},
methods: {
initSpread: function (spread) {
this.spread = spread;
spread.suspendPaint();
let sheet1 = spread.getSheetFromName("Sheet1");
let sheet2 = spread.getSheetFromName("Sheet2");
let sheet3 = spread.getSheetFromName("Sheet3");
sheet1.isSelected(true);
sheet2.isSelected(true);
sheet3.isSelected(true);
let self = this;
spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (e, args) {
let sheetName = args.sheetName,
sheet = self.spread.getSheetFromName(sheetName);
switch (sheetName) {
case "Sheet1":
self.sheet1IsSelected = sheet.isSelected();
break;
case "Sheet2":
self.sheet2IsSelected = sheet.isSelected();
break;
case "Sheet3":
self.sheet3IsSelected = sheet.isSelected();
break;
case "Sheet4":
self.sheet4IsSelected = sheet.isSelected();
break;
case "Sheet5":
self.sheet5IsSelected = sheet.isSelected();
break;
}
});
spread.resumePaint();
},
onChange(e) {
let spread = this.spread;
let sheet = spread.getSheetFromName(e.target.id);
sheet.isSelected(e.target.checked);
spread.repaint();
}
}
});
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">
<!-- 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;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.sheets-checkboxes-container {
padding-left: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(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);
