SpreadJS 产品帮助手册
Page tree
Skip to end of metadata
Go to start of metadata

切片器允许你筛选数据。

切片器提供了一个不需要下拉菜单的筛选数据的方式。

TableSlicerData 类给切片器提供了表格数据和筛选相关的信息。

切片器有 头部，标题，条目 和一个清除按钮。你可以对切片器进行移动，缩放，删除，复制，粘贴，重做和撤销操作。

切片器主体由切片项目组成。切片项目有四种不同类型：

  • No Data Items: 项目被其他切片器筛选的切片项目。
  • Has Data Items: 项目未被其他切片器筛选的切片项目。
  • Selected Items: 项目被本切片器筛选的切片项目。
  • Unselected Items: 项目未被本切片器筛选的切片项目。



表格上的数据有变化，将会导致切片器的变化。


表格的变化

切片器的变化

修改数据

切片器主题会变化

修改列名称

切片器标题会变化

添加行

切片器条目会变化

添加列

无变化

删除行

切片器条目会变化

删除列

链接到该列的切片器会删除

删除表格

所有切片器都会被删除

你可以使用 Slicer 类来设置切片器。

你也可以使用 FloatingObject 类来设置切片器。

你可以设置切片器是否被锁定了 （isVisible 或者 isLocked 方法）。

isLocked 方法仅在工作表受保护时才生效。

你可以使用 slicers.add 方法添加一个切片器，使用 slicers.remove 方法删除一个切片器。

对列和行重设大小会导致切片器的位置发生变化（取决于 dynamicMove 和 dynamicSize 的设置）。

下表描述了 dynamicMove 和 dynamicSize 为不同值时切片器自动移动的行为：


DynamicMove

DynamicSize

Result

true

true

切片器会随着工作表自动移动并缩放

true

false

切片器会随着工作表自动移动，但不缩放

false

true or false

切片器会随着工作表缩放，但不移动


示例代码
以下代码创建了一个表格，并且创建了一个切片器。

JavaScript
//create a table
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]);
 
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
 //change the slicer properties.
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(GC.Spread.Sheets.Slicers.SlicerStyles.dark4());

以下代码创建了一个表格，和一个项目切片器。

JavaScript
//create table
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)
//create an item slicer
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//Add the item slicer to the dom tree.
//The "slicerHost" is the div you want to add the slicer's dom to.
$("#slicerHost").append(slicer.getDOMElement());
.....
<div id="slicerHost" style="height: 300px; width: 50%"></div>

另见

TableSlicerData class

  • No labels