切片器

SpreadJS提供了一个切片器，只需单击即可筛选数据透视表。用户可以通过使用切片器连接多个数据透视表来筛选聚合目标。切片器可以使用手动筛选筛选数据透视表的数据，并提供了一个用户友好的界面，使用户能够有效地管理数据透视表的行和列字段的筛选状态。

PivotTableItemSlicer类提供了各种与切片器相关的方法来使用数据透视表切片器。

以下代码示例演示如何使用SlicerCollection.add方法添加数据透视表切片器。切片器类型应设置为“数据透视表”。

$(document).ready(function () {
    // 初始化 Spread
    spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
    spread.options.allowDynamicArray = true;
    spread.suspendPaint();
    // 获取工作表
    pivotLayoutSheet = spread.getSheet(0);
    dataSourceSheet = spread.getSheet(1);

    // 隐藏网格线
    pivotLayoutSheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };

    // 设置工作表名称
    pivotLayoutSheet.name("PivotLayout");
    dataSourceSheet.name("DataSource");
    // 设置行数
    dataSourceSheet.setRowCount(245);
    // 设置数据源
    dataSourceSheet.setArray(0, 0, pivotDB_UseCase);
    //添加table
    dataSourceSheet.tables.add('tableSales', 0, 0, 245, 8);

    // 初始化数据透视表
    var pt = initPivotTable(pivotLayoutSheet);
    pivotLayoutSheet.setColumnCount(200);
    initSlicer(pivotLayoutSheet, pt);

    // 自动调整工作表中的列
    autoFit(pivotLayoutSheet);
    autoFit(dataSourceSheet);
    spread.resumePaint();
});

function initPivotTable(sheet) {
    myPivotTable = sheet.pivotTables.add("pivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark3);
    myPivotTable.suspendLayout();
    myPivotTable.add("City", "City", GC.Spread.Pivot.PivotTableFieldType.rowField);
    myPivotTable.add("Category", "Category", GC.Spread.Pivot.PivotTableFieldType.rowField);

    myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.columnField);
    let groupInfo = {
        originFieldName: "OrderDate",
        dateGroups: [
            {
                by: GC.Pivot.DateGroupType.quarters
            }
        ]
    };
    myPivotTable.group(groupInfo);
    myPivotTable.add("TotalPrice", "TotalPrice", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
    formatValueField(myPivotTable);
    myPivotTable.resumeLayout();
    myPivotTable.autoFitColumn();
    return myPivotTable;
}

function initSlicer(sheet, pt) {
    slicer_City = sheet.slicers.add("slicer_City", pt.name(), "City", GC.Spread.Sheets.Slicers.SlicerStyles.light4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);
    slicer_City.position(new GC.Spread.Sheets.Point(1020, 10));
    slicer_Category = sheet.slicers.add("slicer_Category", pt.name(), "Category", GC.Spread.Sheets.Slicers.SlicerStyles.light1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable)
    slicer_Category.position(new GC.Spread.Sheets.Point(1220, 10));
    slicer_Date = sheet.slicers.add("slicer_Date", pt.name(), "OrderDate", GC.Spread.Sheets.Slicers.SlicerStyles.other2(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);
    slicer_Date.position(new GC.Spread.Sheets.Point(1020, 280));
}

在切片器中排序

用户可以对数据透视表切片器中的项进行排序以及筛选。切片器设置对话框中提供了以下选项：

Source Name： 指定切片器的名称
Header： - Display Header CheckBox：检查是否要在标题上显示切片器的名称。
Caption: 用户要在标题上显示的切片器的名称。
Sort State: 根据排序的符号来查看当前数据项是升序还是降序。
No Data Items Show: 包含以下选项：- Hide items with no data: 当为true时，不会显示切片器中没有数据的项。
Show items with no data last: 如果为true，则最终显示没有数据的项。如果为false，则按排序状态对项进行排序。例如：像<1/1/2013 5:30:00 与 >12/30/2014 5:30:00 两个日期项，按排序状态排序。
Visually indicate items with NoData: 如果为true，没有数据的项显示为灰色。如果为false，没有数据的项与有数据的项的显示方式相同。例如：像<1/1/2013 5:30:00与>12/30/2014 5:30:00两个日期项不包含任何数据, 它们仍然展示在列表中。

默认排序值是"Hide items with no data" and "Show Items with no data last". 切片器项被分为两部分，每部分按升序或降序排序。

以下代码示例定义了不同的排序或筛选函数。

function setMultiSelectFalseForSlicerCity() {
    // 将 MultiSelect 设置为 True
    slicer_City.multiSelect(true);
}
function setSortStateForSlicerCity() {
    // 设置为降序
    slicer_City.sortState(GC.Spread.Sheets.SortState.descending);
}

function showNoDataItem() {
    myPivotTable.updateSource();
    // to check this delete City "Jersey"( or any one city from DataSource and click this button- on clicking this button, PT will be updated first)
    slicer_City.showNoDataItems(false);
}

function visuallyNoDataItems() {
    myPivotTable.updateSource();
    slicer_Date.visuallyNoDataItems(false);
}
function showNoDataItemsInLast() {
    slicer_Date.showNoDataItemsInLast(false);
}

切片器和数据透视表连接

用户可以使用PivotTableItemSlicer.connectPivotTable方法在切片器和数据透视表之间建立连接。连接由任一侧控制，因为切片器和数据透视表都可以相互连接或断开连接。如果切片器与数据透视表断开连接，则其筛选操作不会影响数据透视表，切片器中也会如此。

以下代码示例显示了如何断开连接。

function disconnectSlicerWithPivotTable() {
    // slicer_Date 与数据透视表断开连接。
    slicer_Date.disconnectPivotTable(myPivotTable.name());
    slicer_Date.captionName("Disconnected");
}

时间线切片器

时间线切片器是交互式筛选，可让您按日期、月份、年份和季度快速筛选数据。控制器提供了一个可视化界面，可帮助您放大和缩小任何时间段以查看和筛选数据透视数据。

时间线切片器仅适用于使用标签条件筛选的数据透视表的日期字段。可以使用Slicers.add类方法将其添加到数据透视表中。将 PivotTimeline设置为切片器类型并应用TimelineLevel枚举选项（例如年、季度、月和日期）来指定如何筛选切片器中的数据。

PivotTableTimelineSlicer类提供了各种自定义切片器 UI 的方法。

用例场景

销售食品和饮料产品的食品销售公司希望显示产品在一年中各个季度的销售数据的示例。

时间线切片器可以帮助分析基于时间段的数据，如下面的 GIF 所示。

// 为年、季、月筛选添加时间线切片器
var timeline_year = sheet.slicers.add("timeline_year", pt.name(), "OrderDate", GC.Spread.Sheets.Slicers.TimelineStyles.dark6(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_year.position(new GC.Spread.Sheets.Point(600, 10));
timeline_year.level(GC.Spread.Sheets.Slicers.TimelineLevel.years);
timeline_year.showSelectionLabel(false);
timeline_year.showTimeLevel(false);
timeline_year.showHorizontalScrollbar(false);
timeline_year.height(100);
timeline_year.captionName("Years");

var timeline_quarter = sheet.slicers.add("timeline_quarter", pt.name(), "OrderDate", GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_quarter.position(new GC.Spread.Sheets.Point(600, 130));
timeline_quarter.level(GC.Spread.Sheets.Slicers.TimelineLevel.quarters);
timeline_quarter.captionName("Quarters");
timeline_quarter.showSelectionLabel(false);

var timeline_month = sheet.slicers.add("timeline_month", pt.name(), "OrderDate", GC.Spread.Sheets.Slicers.TimelineStyles.light4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_month.position(new GC.Spread.Sheets.Point(600, 290));
timeline_month.captionName("Months");
timeline_month.showTimeLevel(false);

使用表格编辑器选择切片器项

在 SpreadJS表格编辑器中，可以执行以下操作来选择数据透视表切片器项：

Action: Click/Drag
Mode: Single/Multi
Key: Ctrl/Shift/None

参数 (Action + Mode + Key)	事件
click + single + none	选择单击的项。
click + single + ctrl click + multi + none click + multi + ctrl	切换单击项的选择状态。
click + single + shift	设置从起点到单击项索引的选择范围。范围内的项保持选中状态，其他项保持未选中状态。
click + multi + shift drag + multi + shift	设置从起点到单击项索引的选择范围，并将选择状态设置为 true。（不能设置为false）
drag + single + none	将拖动的项状态设置为 true，其他设置为 false。
drag + single + ctrl drag + multi + none drag + multi + ctrl	切换拖动项的选择状态。
drag + single + shift	设置从起点到拖动终点项索引的选择范围。范围内被选中的项。