表格切片器

切片器使您可以快速筛选数据。切片器无需使用下拉列表即可提供筛选详细信息。

TableSlicerData 类为切片器提供表数据和筛选信息。

切片器具有标题，标题，项目和清除按钮。您可以移动，调整大小，删除，剪切，复制，粘贴，撤消或重做切片器。

由另一个切片器筛选掉的项目称为“有数据项目”和“无数据项目”。切片器筛选的项目称为“选定项目”和“未选定项目”。

项目类型	描述
no data items	被另一个切片器过筛选的项目
has data items	尚未被其他切片器筛选掉的项目
selected items	切片器筛选掉的项目
unselected items	切片器尚未筛选掉的项目

切片器与表筛选同步。下表变更导致切片器发生变更。

表格变更	切片器变更
modify data	切片器项目已变更
modify column name	切片器标题已变更
add row	切片器项目已变更
add column	无变更
delete row	切片器项目已变更
delete column	连接到此列的切片器已删除
remove table	删除了与此表连接的所有切片器

您可以使用 Slicer 类设置切片器选项。你还可以通过 FloatingObject 类设置切片器选项。您可以指定切片器是可见的还是锁定的（ isVisible 或 isLocked 方法）。 isLocked 方法仅在表单受保护的情况下才有效。

您可以添加切片器。 add 方法并使用 ** ** slicers. remove 方法移除切片器。

调整行或列的大小或移动该行会导致切片器的位置和大小根据 dynamicMove 和 dynamicSize 方法。下表显示了dynamicMove和dynamicSize设置的结果。

DynamicMove	DynamicSize	Result
true	true	切片器已移动并调整大小
true	false	切片器已移动，但未调整大小
false	true or false	切片器未移动或调整大小

示例代码

本示例创建一个表并添加切片器。

//创建表格
datas = [
["1", "NewYork", "1968/6/8", "80", "180"],
["4", "NewYork", "1972/7/3", "72", "168"],
["4", "NewYork", "1964/3/2", "71", "179"],
["5", "Washington", "1972/8/8","80", "171"],
["6", "Washington", "1986/2/2", "89", "161"],
["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
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]);

//将切片器添加到表单并返回切片器实例。
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
//变更切片器属性。
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(GC.Spread.Sheets.Slicers.SlicerStyles.dark4());

本示例创建一个表并添加一个项目切片器。

//创建表格
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//创建一个项目切片器
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//将项目切片器添加到dom树。
//“slicerHost”是要将切片器的dom添加到的div。
$("#slicerHost").append(slicer.getDOMElement());
.....
<div id="slicerHost" style="height: 300px; width: 50%"></div>