筛选操作

SpreadJS允许您对行筛选执行各种操作。

创建自定义筛选

可以创建自定义筛选项并将其添加到行筛选中。

下面的代码示例演示如何创建一个只显示从10到50的数字的自定义筛选。

//创建自定义条件。
function CustomFilter(){
    GC.Spread.Sheets.ConditionalFormatting.Condition.apply(this, arguments);
    //this.conditionType("CustomFilter");
};
CustomFilter.prototype = new GC.Spread.Sheets.ConditionalFormatting.Condition();
CustomFilter.prototype.evaluate = function (evaluator, row, col) {
    var value = evaluator.getValue(row, col);
    if (value !== null && value >= 10 && value <= 50) {
        //下述条件都满足时返回True。
        // (1)单元格有数值。
        // (2)数值不小于10.
        // (3)数值不大于50
        return true;
    } else {
        return false;
    }
};

// 创建工作簿及工作表。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();

activeSheet.setValue(0, 0, 10);
activeSheet.setValue(1, 0, 100);
activeSheet.setValue(2, 0, 50);
activeSheet.setValue(3, 0, 40);
activeSheet.setValue(4, 0, 80);
activeSheet.setValue(5, 0, 1);
activeSheet.setValue(6, 0, 65);
activeSheet.setValue(7, 0, 20);
activeSheet.setValue(8, 0, 30);
activeSheet.setValue(9, 0, 35);

//设置行筛选
var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1));
activeSheet.rowFilter(rowFilter);
rowFilter.addFilterItem(0, new CustomFilter());
rowFilter.filter(0);

获取行筛选状态

使用 isFiltered ， isRowFilteredOut ， onFilter 等 RowFilterBase 类方法 来获取不同的行筛选。

下面的代码示例显示一个按钮集，用于指示是否筛选了行或列。

$("#button1").click(function()   
{
    var rowFilter = spread.getActiveSheet().rowFilter();
    if (rowFilter.isFiltered(0))
    {
        console.log("Row-filtering executed for Column1");
    }
    else
    {
        console.log("Row-filtering not executed for Column1");
    }
})

获取行筛选结果

可以使用 getFilterItems 等 RowFilterBase 类方法获取筛选项并显示结果。

下面的代码示例演示如何在浏览器控制台上获取筛选结果。

$("#button1").click(function ()
{
    var rowFilter = spread.getActiveSheet().rowFilter();
    //*********************************************
    
    // 如果未筛选Column1，则退出。
    //*********************************************
    if (!rowFilter.isFiltered(0))
    {
        return;
    }
    
    //*********************************************
    // 筛选字符串
    //*********************************************
    var filterItems = rowFilter.getFilterItems(0);
    var str = "Filtered strings:";
    filterItems.forEach(function (item)
    {
        str += " " + item.expected();
    })
    console.log(str);
    console.log("");
    
    //*********************************************
    // 已筛选（显示）行数
    //*********************************************
    var range = rowFilter.range;
    var filteredInRows = [], filteredOutRows = [];
    for (var i = range.row, last = range.row + range.rowCount; i < last; i++)
    {
        if (rowFilter.isRowFilteredOut(i))
        {
            filteredOutRows.push(i);
        }
        else
        {
            filteredInRows.push(i);
        }
    }
    
    console.log("Number of Filtered-In (displayed) rows: " + filteredInRows.length);
    console.log("");
    // *********************************************
    // 筛选掉（隐藏）的行数
    // *********************************************
    console.log("Number of Filtered-Out (hidden) rows: " + filteredOutRows.length);
    console.log("");
    filteredOutRows.forEach(function(item){
        console.log("Filtered-Out (hidden) row index: " + item);
    });
    
    console.log("");
    //*********************************************
    //已筛选（显示）行/筛选掉（隐藏）行
    //*********************************************
    filteredOutRows.forEach(function(item){
        console.log("Data of Filtered-Out (hidden) row: " + activeSheet.getValue(item, 0));
    });
    
    console.log("");
    filteredInRows.forEach(function(item)
    {
        console.log("Data of Filtered-In (displayed) row: " + activeSheet.getValue(item, 0));
    });
});

隐藏筛选指示器

您可以选择是否使用RowFilterBase. filterButtonVisible 显示筛选指示器。将其设置为false可隐藏筛选指示器，否则默认为true。

下面的代码示例演示如何使用按钮隐藏或显示筛选指示器。

$("#button1").click(function()
{
    // 隐藏筛选指示器                        
    var rowFilter = spread.getActiveSheet().rowFilter();
    rowFilter.filterButtonVisible(0, false);
    activeSheet.repaint();
});
           
$("#button2").click(function()
{
    // 显示筛选指示器                       
    var rowFilter = spread.getActiveSheet().rowFilter();
    rowFilter.filterButtonVisible(0, true);
    activeSheet.repaint();
});

自动扩展筛选区域

您可以选择是否将筛选区域扩展到SpreadJS中的原始筛选区域之外。

allowAutoExtendFilterRange属性设置为 true 时，会扩展筛选区域，直到在同一列或相邻列中遇到任何非空单元格。默认情况下，该属性设置为 false。

您还可以使用返回数组的 rowFilter 的extendedRange属性来获取扩展的筛选区域。如果 allowAutoExtendFilterRange 属性设置为 false，则 extendedRange 值与 GC.Spread.Sheets.Filter.RowFilterBase.range 相同。

下面的 GIF 和相应的代码示例说明了扩展筛选区域的用法并从工作表中获取扩展区域。

function AllowAutoExtend(spread, rowFilter) {
    // 将 allowAutoExtendFilterRange 设置为 true
    spread.options.allowAutoExtendFilterRange = true;

    // 获取扩展区域
    var extendedFilterRange = rowFilter.extendedRange;
    // 将返回 -  row: 2, rowCount: 5, col: 0, colCount: 5
}

注意: 导入包含筛选的 Excel 文件时，此属性设置为 true。

下表描述了当自动扩展筛选区域设置为 true 时可以观察到的不同场景。

设想	示例
当创建一个筛选并且只选择一个单元格时，SpreadJS 将扩展筛选区域，直到区域周围的单元格都是空的。
创建筛选后，SpreadJS 将筛选区域扩展到原始值以下，直到出现空值。
如果从扩展筛选区域单元格之一中删除值，则会更新筛选列表。
如果从基本筛选区域单元格中删除了一个值，则筛选列表中会显示一个空白。
如果创建了多个列筛选，SpreadJS 会自动扩展筛选区域，直到每列的值为空的行。