概述
本 Demo 展示了如何使用 TableSlicerData 为表格创建自定义切片器。Demo 中创建了两个自定义切片器，分别用于过滤"城市"和"性别"列，用户可以通过复选框选择要显示的数据项，实现交互式的数据筛选。
实现思路
创建表格并填充数据，使用 tables.addFromDataSource() 方法
通过 table.getSlicerData() 获取 TableSlicerData 实例
定义自定义切片器类，实现 setData、onDataLoaded 等方法
创建切片器 DOM 元素，为每个唯一数据项生成复选框
监听复选框变化事件，调用 doFilter() 或 doUnfilter() 执行过滤
代码解析
创建表格并获取 TableSlicerData
这段代码创建了包含姓名、性别、城市、生日四列的表格，然后通过 getSlicerData() 方法获取 TableSlicerData 实例，作为切片器的数据源。
定义自定义切片器类
自定义切片器需要实现 setData 方法，其中调用 attachListener(this) 将切片器附加到数据源，使其能够接收数据变化通知。
获取唯一数据并创建 UI
getExclusiveData() 方法返回指定列的唯一值数组。例如，"City" 列会返回 ["NewYork", "Washington", "Atlanta", "Houston"]。代码为每个唯一值创建一个复选框。
实现过滤逻辑
当复选框状态改变时，收集所有选中项的索引，然后调用 doFilter() 方法过滤数据。如果没有任何选中项，则调用 doUnfilter() 清除过滤。exclusiveRowIndexes 参数指定要保留的数据行索引。
运行效果
页面右侧显示两个自定义切片器："City" 和 "Sex"
每个切片器列出该列的所有唯一值，默认全选
点击复选框取消选择某项时，表格会实时过滤，只显示符合条件的数据
可以同时使用多个切片器进行联合过滤
所有复选框都取消选择时，表格会显示所有数据
API 参考
getSlicerData 方法
获取表格的切片器数据实例，用于创建自定义切片器。
getExclusiveData 方法
columnName：列名
返回值：该列的唯一值数组
doFilter 方法
columnName：要过滤的列名
condition.exclusiveRowIndexes：要保留的数据行索引数组
isPreview：可选，是否为预览模式
doUnfilter 方法
columnName：要取消过滤的列名
attachListener 方法
listener：监听器对象，需实现 onDataLoaded、onFiltered 等方法
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
// Define data source.
var columnNames = ["Name", "Sex", "City", "Birthday"],
data = [
["Bob", "Man", "NewYork", "1968/06/08"],
["Betty", "Woman", "Washington", "1972/07/03"],
["Alice", "Woman", "Atlanta", "1964/03/02"],
["Tom", "Man", "Houston", "1986/12/03"],
["Jenny", "Woman", "Washington", "1956/10/13"],
["Nacy", "Woman", "NewYork", "1989/01/14"],
["John", "Man", "Houston", "1995/01/01"],
["Mark", "Man", "Atlanta", "1965/11/11"],
["Susan", "Woman", "Atlanta", "1983/07/08"]];
// Create a table.
var table = sheet.tables.addFromDataSource("table1", 1, 1, data);
table.setColumnName(0, columnNames[0]);
table.setColumnName(1, columnNames[1]);
table.setColumnName(2, columnNames[2]);
table.setColumnName(3, columnNames[3]);
sheet.getRange(-1, 1, -1, 6).width(80);
// Get TableSlicerData from table.
var slicerData = table.getSlicerData();
// Create a custom slicer and add it to dom tree.
var slicer1 = new CustomSlicer(document.getElementById("cityContainer"),'City');
slicer1.setData(slicerData, "City");
var slicer2 = new CustomSlicer(document.getElementById("sexContainer"),'Sex');
slicer2.setData(slicerData, "Sex");
};
// Define custom slicer.
function CustomSlicer(container,name) {
this.container = container;
this.name = name;
this.slicerData = null;
this.columnName = null;
}
CustomSlicer.prototype.setData = function (slicerData, columnName) {
this.slicerData = slicerData;
this.columnName = columnName;
this.slicerData.attachListener(this);
this.onDataLoaded();
}
CustomSlicer.prototype.onDataLoaded = function () {
var columnName = this.columnName,
exclusiveData = this.slicerData.getExclusiveData(columnName);
// Create slicer dom tree.
var strong = document.createElement('strong');
strong.innerText = this.name+':';
var br = document.createElement('br');
this.container.appendChild(strong);
this.container.appendChild(br);
var domString = "", id;
var div = document.createElement('div');
div.setAttribute('class','option-group')
for (var i = 0; i < exclusiveData.length; i++) {
id = columnName + (i + 1);
domString += '<input type="checkbox" name="' + columnName + '" value="' + exclusiveData[i] + '" id="' + id + '" checked>';
domString += '<label for="' + id + '">' + exclusiveData[i] + '</label></br>';
}
div.innerHTML= domString;
this.container.appendChild(div);
// Attach events to dom element.
var self = this;
document.querySelector('.options-container').addEventListener('change',function (e) {
// Invoke getExclusiveData method to get exclusive data from slicerData.
var exclusiveData = self.slicerData.getExclusiveData(self.columnName);
// parent = this.parentNode.parentNode;
items = document.querySelectorAll('.options-container input');
indexes = [];
for (var i = 0, length = items.length; i < length; i++) {
if (items[i].checked) {
var value = items[i].value;
if (!isNaN(parseInt(value))) {
value = parseInt(value);
}
if(exclusiveData.indexOf(value) != -1){
indexes.push(exclusiveData.indexOf(value))
}
}
}
if (indexes.length === 0) {
// Invoke doUnfilter method when all item are not selected.
self.slicerData.doUnfilter(self.columnName);
} else {
// Invoke doFilter method when any item is selected.
self.slicerData.doFilter(self.columnName, { exclusiveRowIndexes: indexes });
}
});
};
<!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" style="height: 100%;">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div id="cityContainer" class="sample-group"></div>
<div id="sexContainer" class="sample-group"></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;
}
label {
display: inline-block;
margin: 6px 0;
}
strong {
display: inline-block;
margin: 12px 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
