概述
本 Demo 展示了如何创建和使用表切片器来筛选表格数据。Demo 中创建了一个包含姓名、城市、生日、性别、体重、身高信息的人员表格，并为姓名、城市、身高三个字段分别创建了切片器。用户可以通过切片器进行数据筛选，还可以通过右侧面板修改切片器的名称、标题等属性。
实现思路
创建人员信息表格并设置列名
使用 sheet.slicers.add() 方法为姓名、城市、身高字段创建三个切片器
为不同切片器设置不同的显示属性（无数据项的显示方式和位置）
绑定 SlicerChanged 事件，监听切片器的选择和属性变化
通过右侧面板提供交互界面，允许用户修改切片器的名称、标题、显示选项等属性
默认筛选城市列，展示切片器之间的联动效果
代码解析
创建表格和切片器
这段代码创建了三个切片器，分别对应表格的姓名、城市和身高列。add 方法的参数依次为切片器名称、表格名称和列名。通过 position 方法设置切片器的显示位置。showNoDataItemsInLast(false) 表示无数据项不显示在列表末尾，showNoDataItems(false) 表示完全不显示无数据项。
绑定切片器事件
这段代码监听切片器的变化事件。当用户点击选择切片器时，启用右侧面板并初始化切片器的属性设置。
程序化筛选数据
这段代码通过 doFilter 方法对城市列进行筛选。exclusiveRowIndexes: [0] 表示排除第一行数据，从而筛选出纽约的数据。这个操作会触发所有关联切片器的联动更新。
运行效果
表格中显示人员信息数据，下方有三个切片器（姓名、城市、身高）
点击切片器中的按钮可以筛选数据，被选中的按钮会高亮显示
默认城市切片器中选中了纽约，表格只显示纽约的数据
点击任意切片器，右侧面板会显示该切片器的属性设置
可以通过右侧面板修改切片器的名称、标题、是否显示标题、是否显示无数据项等属性
多个切片器之间会联动：当一个切片器筛选数据后，其他切片器会自动更新，显示当前筛选条件下可用的数据项
API 参考
sheet.slicers.add()
slicerName：切片器名称
targetName：表格名称
itemName：列名
style：可选，切片器样式
type：可选，切片器类型
slicer.showNoDataItems()
获取或设置是否显示无数据项。
slicer.showNoDataItemsInLast()
获取或设置切片器是否将无数据项显示在列表末尾。
table.getSlicerData().doFilter()
columnName：列名
conditional：筛选条件对象，包含 exclusiveRowIndexes 属性
isPreview：可选，是否为预览模式
SlicerChanged 事件
当切片器发生变化时触发，事件参数包括：
sheet：触发事件的工作表
slicer：触发事件的切片器
propertyName：已更改的切片器属性名称
window.onload = function () {
_disableInput();
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.suspendPaint();
var sheet = spread.getActiveSheet();
var dataColumns = ["姓名", "城市", "生日", "性别", "体重", "身高"];
var data = [
["鲍勃", "纽约", "1968/6/8", "男", "80", "180"],
["贝蒂", "纽约", "1972/7/3", "女", "72", "168"],
["切莉", "华盛顿", "1986/2/2", "女", "58", "161"],
["加里", "纽约", "1964/3/2", "男", "71", "179"],
["汉克", "华盛顿", "1972/8/8", "男", "80", "171"],
["伊娃", "华盛顿", "1993/2/15", "女", "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", "姓名");
slicer1.position(new GC.Spread.Sheets.Point(10, 170));
// show data items in original position
slicer1.showNoDataItemsInLast(false);
var slicer2 = sheet.slicers.add("slicer2", "table1", "城市");
slicer2.position(new GC.Spread.Sheets.Point(220, 170));
var slicer3 = sheet.slicers.add("slicer3", "table1", "身高");
slicer3.position(new GC.Spread.Sheets.Point(430, 170));
// do not show filtered out items
slicer3.showNoDataItems(false);
bindSlicerEvent(spread);
spread.resumePaint();
// filter a city and show how other slicers' related data was effected
table.getSlicerData().doFilter("城市", {exclusiveRowIndexes: [0]});
};
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();
var selectedSlicers = getSelectedSlicers(sheet);
if (selectedSlicers && selectedSlicers.length > 1) {
document.getElementById('slicer_name').disabled = true;
clearSlicerSetting();
}
else if (selectedSlicers.length === 1) {
initSlicerSetting(slicer);
}
}
else {
_disableInput();
}
}
});
var sheet = spread.getActiveSheet();
// slicer name
document.getElementById('slicer_name').oninput = function (e) {
var name = e.target.value;
if (!name) {
return;
}
var isSameName = isExistedName(sheet, name);
if (isSameName === true) {
alert("Duplicated slicer name.");
return;
}
else if (isSameName === false) {
setSlicerProperty({sheet: sheet}, "name", name);
}
};
// slicer caption name
document.getElementById('slicer_caption_name').oninput = function (e) {
setSlicerProperty({sheet: sheet}, "captionName", e.target.value);
}
// slicer header
document.getElementById('show_header').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "showHeader", e.target.checked);
};
// slicer show no data items
document.getElementById('show_nodata_items').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "showNoDataItems", e.target.checked);
};
// slicer show no data items last
document.getElementById('show_nodata_items_last').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "showNoDataItemsInLast", e.target.checked);
};
// slicer visually no data items
document.getElementById('visually_nodata_items').onchange = function (e) {
setSlicerProperty({sheet: sheet}, "visuallyNoDataItems", e.target.checked);
};
}
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 "name":
slicer.name(value);
break;
case "captionName":
slicer.captionName(value);
break;
case "showHeader":
slicer.showHeader(value);
break;
case "showNoDataItems":
slicer.showNoDataItems(value);
break;
case "showNoDataItemsInLast":
slicer.showNoDataItemsInLast(value);
break;
case "visuallyNoDataItems":
slicer.visuallyNoDataItems(value);
break;
}
}
}
function isExistedName(sheet, name) {
if (!sheet) {
return null;
}
var slicers = sheet.slicers.all();
if (!slicers || _isEmptyObject(slicers)) {
return null;
}
for (var item in slicers) {
var slicer = slicers[item];
if (!slicer.isSelected() && slicer.name() === name) {
return true;
}
}
return false;
}
function initSlicerSetting(slicer) {
document.getElementById('slicer_name').value = slicer.name();
document.getElementById('slicer_caption_name').value = slicer.captionName();
document.getElementById('show_header').checked = slicer.showHeader();
document.getElementById('show_nodata_items').checked = slicer.showNoDataItems();
document.getElementById('show_nodata_items_last').checked = slicer.showNoDataItemsInLast();
document.getElementById('visually_nodata_items').checked = slicer.visuallyNoDataItems();
}
function clearSlicerSetting() {
document.getElementById('slicer_name').value = "";
document.getElementById('slicer_caption_name').value = "";
document.getElementById('show_header').checked = false;
document.getElementById('show_nodata_items').checked = false;
document.getElementById('show_nodata_items_last').checked = false;
document.getElementById('visually_nodata_items').checked = false;
}
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-row input');
for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
inputs[inputIndex].disabled = true;
}
}
function _activeInput() {
var inputs = document.querySelectorAll('.option-row input');
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="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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 style="padding:2px 10px; background-color:#F4F8EB">选择切片器，然后更改选项。</p>
<div class="option-row">
<label for="slicer_name" style="display: inline-block;width: 150px">名称:</label>
<input type="text" id="slicer_name" />
</div>
<div class="option-row">
<label for="slicer_caption_name" style="display: inline-block;width: 150px">标题名称:</label>
<input type="text" id="slicer_caption_name" />
</div>
<div class="option-row">
<input type="checkbox" id="show_header" checked />
<label for="show_header">显示标题</label>
</div>
<div class="option-row">
<input type="checkbox" id="show_nodata_items" checked />
<label for="show_nodata_items">显示无数据项</label>
</div>
<div class="option-row">
<p class="desc">选中此复选框可在切片器中最后显示未筛选的数据项。</p>
<input type="checkbox" id="show_nodata_items_last" />
<label for="show_nodata_items_last">最后显示无数据项</label>
<p style="padding:2px 10px; background-color:#F4F8EB">选中此复选框可将表格中不存在的项显示为灰色。</p>
<input type="checkbox" id="visually_nodata_items" checked />
<label for="visually_nodata_items">直观显示无数据项</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;
}
