disableResizingAndMoving: When the 'disableResizingAndMoving' property is true, and the mouse is pressed on the slicer, there are no resizing indicators and the slicer cannot be moved or resized; however, the slicer can be filtered using the mouse or unfiltered by selecting the 'clearFilter' button.
isLocked: When the sheet is not protected, the slicer's 'isLocked' property does not take effect. When the sheet is protected and the slicer's 'isLocked' property is true, no resizing indicator is shown and the slicer cannot be moved or resized with the mouse. The slicer cannot be filtered with the mouse or unfiltered by clicking the 'clearFilter' button.
sortState: The 'sortState' indicates the sorting order of the slicer items. The type of the 'sortState' property is GC.Spread.Sheets.SortState. Its default value is GC.Spread.Sheets.SortState.ascending.
dynamicMove and dynamicSize: When 'dynamicMove' and 'dynamicSize' properties are different, and the sheet's row or column is changed, the slicer's behavior is different.
Move and size with cells: dynamicMove property is true and dynamicSize property is true.
Move and don't size with cells: dynamicMove property is true and dynamicSize property is false.
Don't move and size with cells: dynamicMove property is false, and dynamicSize property is true or false.
style: SpreadJS supports 14 kinds of built-in slicer styles. You can use the built-in slicer style to change the slicer's view with the following code:
The default style of the slicer is GC.Spread.Sheets.Slicers.SlicerStyles.light1().
SpreadJS supports customize the theme of the table slicer. Using code such as the following:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div class="options-container">
<p>Select the slicer and then change the options.</p>
<div class="option-group">
<label for="sort_state">Sort State:</label>
<select id="sort_state" :disabled="disableForm" v-model.number="sortState" @change="updateSortState">
<option value=0>none</option>
<option value=1>ascending</option>
<option value=2>descending</option>
</select>
</div>
<div class="option-group">
<label for="slicer_style">Styles:</label>
<select id="slicer_style" :disabled="disableForm" v-model="styleName" @change="updateStyleName">
<option value="light1">Light1</option>
<option value="light2">Light2</option>
<option value="light3">Light3</option>
<option value="light4">Light4</option>
<option value="light5">Light5</option>
<option value="light6">Light6</option>
<option value="other1">Other1</option>
<option value="other2">Other2</option>
<option value="dark1">Dark1</option>
<option value="dark2">Dark2</option>
<option value="dark3">Dark3</option>
<option value="dark4">Dark4</option>
<option value="dark5">Dark5</option>
<option value="dark6">Dark6</option>
<option value="custom1">Custom1</option>
<option value="custom2">Custom2</option>
</select>
</div>
<hr>
<div class="option-group">
<input type="checkbox" id="protect_sheet" v-model="protectSheet" @change="updateProtectSheet" />
<label for="protect_sheet">Protect Sheet</label>
</div>
<div class="option-group">
<input type="checkbox" id="lock_slicer" :disabled="disableForm" v-model="lockSlicer"
@change="updateLockSlicer" />
<label for="lock_slicer">Lock Slicer</label>
</div>
<hr>
<div class="option-group">
<input type="radio" name="dynamic_move_size" id="slicer_move_size" :disabled="disableForm"
:checked="dynamicMove && dynamicSize" @change="movesize" />
<label for="slicer_move_size">Move and size with cells</label>
</div>
<div class="option-group">
<input type="radio" name="dynamic_move_size" :disabled="disableForm" id="slicer_move_no_size"
:checked="dynamicMove && !dynamicSize" @change="movenosize" />
<label for="slicer_move_no_size">Move and don't size with cells</label>
</div>
<div class="option-group">
<input type="radio" name="dynamic_move_size" :disabled="disableForm" id="slicer_no_move_size"
:checked="!dynamicMove && !dynamicSize" @change="nomovesize" />
<label for="slicer_no_move_size">Don't move and size with cells</label>
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue';
import '@mescius/spread-sheets-slicers';
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
const spreadRef = ref(null);
const sortState = ref(0);
const styleName = ref('light1');
const protectSheet = ref(true);
const lockSlicer = ref(true);
const dynamicMove = ref(true);
const dynamicSize = ref(false);
const selectedSlicersList = ref([]);
const disableForm = ref(true);
const getSelectedSlicers = (sheet) => {
if (!sheet) {
return null;
}
let slicers = sheet.slicers.all();
if (!slicers || _isEmptyObject(slicers)) {
return null;
}
let selectedSlicersList = [];
for (let item in slicers) {
let slicer = slicers[item];
if (slicer.isSelected()) {
selectedSlicersList.push(slicer);
}
}
return selectedSlicersList;
}
const _isEmptyObject = (obj) => {
for (let name in obj) {
return false;
}
return true;
}
const updateProtectSheet = () => {
spreadRef.value.getActiveSheet().options.isProtected = protectSheet.value;
}
const updateSortState = () => {
selectedSlicersList.value.forEach((slicer) => {
slicer.sortState(sortState.value);
});
}
const updateStyleName = () => {
selectedSlicersList.value.forEach((slicer) => {
slicer.style(styleName.value);
});
}
const updateLockSlicer = () => {
selectedSlicersList.value.forEach((slicer) => {
slicer.isLocked(lockSlicer.value);
});
}
const updateMoveSize = () => {
selectedSlicersList.value.forEach((slicer) => {
slicer.dynamicMove(dynamicMove.value);
slicer.dynamicSize(dynamicSize.value);
});
}
const movesize = () => {
dynamicMove.value = true;
dynamicSize.value = true;
updateMoveSize();
}
const movenosize = () => {
dynamicMove.value = true;
dynamicSize.value = false;
updateMoveSize();
}
const nomovesize = () => {
dynamicMove.value = false;
dynamicSize.value = false;
updateMoveSize();
}
const initSpread = (spread) => {
spreadRef.value = spread;
initCustomThemes(spread);
spread.suspendPaint();
var sheet = spread.getActiveSheet();
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"],
["Gary", "NewYork", "1964/3/2", "man", "71", "179"],
["Hunk", "Washington", "1972/8/8", "man", "80", "171"],
["Cherry", "Washington", "1986/2/2", "woman", "58", "161"],
["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 slicer1 = sheet.slicers.add("slicer1", "table1", "Height");
slicer1.position(new GC.Spread.Sheets.Point(100, 180));
bindSlicerEvent(spread);
spread.resumePaint();
}
const initCustomThemes = (spread) => {
const theme1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
theme1.fromJSON(GC.Spread.Sheets.Slicers.SlicerStyles.light1().toJSON());
theme1.name('custom1');
theme1.wholeSlicerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('rgb(225, 245, 254)'));
const theme2 = new GC.Spread.Sheets.Slicers.SlicerStyle();
theme2.fromJSON(GC.Spread.Sheets.Slicers.SlicerStyles.other2().toJSON());
theme2.name('custom2');
const wholeSlicerStyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
wholeSlicerStyle.backColor('#e3f2fd');
theme2.wholeSlicerStyle(wholeSlicerStyle);
spread.customSlicerThemes.add(theme1);
spread.customSlicerThemes.add(theme2);
}
const bindSlicerEvent = (spread) => {
spread.bind(GC.Spread.Sheets.Events.SlicerChanged, function (event, args) {
var sheet = args.sheet;
var slicer = args.slicer;
if (!slicer) {
return;
}
var propertyName = args.propertyName;
if (propertyName === "isSelected") {
if (slicer.isSelected()) {
initSlicerSetting(sheet, slicer);
selectedSlicersList.value = getSelectedSlicers(sheet)
disableForm.value = false;
} else {
disableForm.value = true;
}
}
});
}
const initSlicerSetting = (sheet, slicer) => {
sortState.value = slicer.sortState();
protectSheet.value = sheet.isProtected;
lockSlicer.value = slicer.isLocked();
dynamicMove.value = slicer.dynamicMove();
dynamicSize.value = slicer.dynamicSize();
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: auto;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-group {
margin-bottom: 6px;
}
label {
display: inline-block;
min-width: 90px;
margin: 6px 0;
}
input {
padding: 4px 6px;
box-sizing: border-box;
margin-bottom: 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin: 12px 0;
}
p {
padding: 2px 10px;
background-color: #F4F8EB;
}
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>
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-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-slicers': 'npm:@mescius/spread-sheets-slicers/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',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
