切片器允许你筛选数据。
切片器提供了一个不需要下拉菜单的筛选数据的方式。
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>
另见