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:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
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();
_disableInput();
document.getElementById('protect_sheet').disabled = false;
clearSlicerSetting();
};
function 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);
}
function 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()) {
_activeInput()
initSlicerSetting(sheet, slicer);
}
else {
_disableInput();
document.getElementById('protect_sheet').disabled = false;
}
}
});
var sheet = spread.getActiveSheet();
// protect sheet
document.getElementById('protect_sheet').onchange = function (e) {
sheet.options.isProtected = e.target.checked;
};
// slicer sort state
document.getElementById('sort_state').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "sortState", e.target.value);
};
// lock slicer
document.getElementById('lock_slicer').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "isLocked", e.target.checked);
};
// slicer dynamic move and dynamic size
document.getElementById('slicer_move_size').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "moveAndSize", e.target.checked);
};
document.getElementById('slicer_move_no_size').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "moveAndNoSize", e.target.checked);
};
document.getElementById('slicer_no_move_size').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "noMoveAndSize", e.target.checked);
};
document.getElementById('slicer_style').onchange = function (e) {
const styleName = document.getElementById('slicer_style').value;
if (styleName) {
setSlicerProperty({sheet: sheet}, "style", styleName);
}
};
}
function setSlicerProperty(data, property, value) {
var sheet = data && data.sheet;
if (!needChangeSlicer(sheet)) {
return;
}
var selectedSlicers = getSelectedSlicers(sheet);
for (var item in selectedSlicers) {
var slicer = selectedSlicers[item];
switch (property) {
case "sortState":
slicer.sortState(GC.Spread.Sheets.SortState[value]);
break;
case "isLocked":
slicer.isLocked(value);
break;
case "moveAndSize":
slicer.dynamicMove(true);
slicer.dynamicSize(true);
break;
case "moveAndNoSize":
slicer.dynamicMove(true);
slicer.dynamicSize(false);
break;
case "noMoveAndSize":
slicer.dynamicMove(false);
slicer.dynamicSize(false);
break;
case "style":
slicer.style(value);
break;
}
}
}
function initSlicerSetting(sheet, slicer) {
document.getElementById('sort_state').value = slicer.sortState() === 1 ? "ascending" :(slicer.sortState() === 2 ? "descending" : "");
document.getElementById('protect_sheet').checked = sheet.isProtected;
document.getElementById('lock_slicer').checked = slicer.isLocked();
var dynamicMove = slicer.dynamicMove(),
dynamicSize = slicer.dynamicSize();
if (!dynamicMove) {
document.getElementById('slicer_no_move_size').checked = true;
}
if (dynamicMove && !dynamicSize) {
document.getElementById('slicer_move_no_size').checked = true;
}
if (dynamicMove && dynamicSize) {
document.getElementById('slicer_move_size').checked = true;
}
}
function clearSlicerSetting() {
document.getElementById('sort_state').value = 'ascending';
document.getElementById('protect_sheet').checked = false;
document.getElementById('lock_slicer').checked = true;
document.getElementById('slicer_move_size').checked = true;
}
function getSelectedSlicers(sheet) {
if (!sheet) {
return null;
}
var slicers = sheet.slicers.all();
if (!slicers || _isEmptyObject(slicers)) {
return null;
}
var selectedSlicers = [];
for (var item in slicers) {
var slicer = slicers[item];
if (slicer.isSelected()) {
selectedSlicers.push(slicer);
}
}
return selectedSlicers;
}
function needChangeSlicer(sheet) {
if (!sheet) {
return false;
}
var selectedSlicers = getSelectedSlicers(sheet);
if (!selectedSlicers || selectedSlicers.length === 0) {
return false;
}
return true;
}
function _disableInput() {
var inputs = document.querySelectorAll('.option-group input, .option-group select');
for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
inputs[inputIndex].disabled = "disabled";
}
}
function _activeInput() {
var inputs = document.querySelectorAll('.option-group input, .option-group select');
for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
inputs[inputIndex].disabled = false;
}
}
function _isEmptyObject(obj) {
var name;
for (name in obj) {
return false;
}
return true;
}
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.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>Select the slicer and then change the options.</p>
<div class="option-group">
<label for="sort_state">Sort State:</label>
<select id="sort_state">
<option value="none">none</option>
<option value="ascending">ascending</option>
<option value="descending">descending</option>
</select>
</div>
<div class="option-group">
<label for="slicer_style">Styles:</label>
<select id="slicer_style">
<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" />
<label for="protect_sheet">Protect Sheet</label>
</div>
<div class="option-group">
<input type="checkbox" id="lock_slicer" checked />
<label for="lock_slicer">Lock Slicer</label>
</div>
<hr>
<div class="option-group">
<input type="radio" name="dynamic_move_size" value="move_size" id="slicer_move_size" checked />
<label for="slicer_move_size">Move and size with cells</label>
</div>
<div class="option-group">
<input type="radio" name="dynamic_move_size" value="move_no_size" id="slicer_move_no_size" />
<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" value="no_move_size" id="slicer_no_move_size" />
<label for="slicer_no_move_size">Don't move and size with cells</label>
</div>
</div>
</div>
</body>
</html>
.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;
}
