筛选行

SpreadJS允许用户根据单元格的数据类型应用条件筛选（数字筛选，文本筛选，日期筛选，颜色筛选，自定义自动）。在表单中执行筛选操作后，将显示与筛选条件匹配的行，而其他行将被隐藏。

列标题中会显示一个筛选按钮，用于允许筛选的列。用户可以单击按钮并选择希望筛选的项目，然后可以对项目列表进行排序。

您可以隐藏筛选的行。您还可以清除在列上应用的筛选条件。清除筛选后，将显示筛选的行，并且“清除筛选”项将被禁用。

如果筛选列中的最大单元格数量是数字数据类型，则数字筛选将显示在AutoFilterListBox菜单中。如果筛选列中的最大单元格数是文本数据类型，则文本筛选将显示在AutoFilterListBox菜单中。

下图显示了数字筛选的示例：

FilterDialog ListBox支持层次树显示。如果筛选列中的最大单元格数是日期数据类型，则日期筛选将显示在AutoFilterListBox菜单中，并且数据将显示为日期树显示。如果筛选数据包含不同类型的值类型，则筛选项将遵循特定顺序：日期，数字，文本，逻辑和空白，就像在Excel中一样。

在日期视图中，不同的层次结构具有不同的格式策略，如下所述：

日期树显示格式基于第一个日期类型的单元格格式。如果用户未设置格式，则将应用自动日期格式。
当区域性为EN且日期格式字符串不包含区域设置ID时，日期树视图格式将显示为：年模式：YYYY，月模式：MMMM，日模式：DD

日期筛选的一个例子具有三级层次结构(Year-->Month-->Day) 如下图所示：

您还可以基于两种模式在滤镜列中应用滤色镜：1）按字体颜色进行滤镜2）按单元格背景颜色进行滤镜。当筛选范围具有多种类型的单元格背景色或字体颜色时，将启用颜色筛选菜单。

用户可以使用鼠标或各种键盘键与筛选对话框进行交互。 Esc键可用于取消对话框。 Tab键可用于移动到不同部分，上下箭头键可用于在项目列表中移动。空格键可用于变更检查状态。

你可以使用 rowFilter HideRowFilter 类创建筛选。你可以使用 filterButtonVisible 方法设置筛选图表。

如果筛选范围包括大纲列，则带有大纲列数据的FilterDialog ListBox中的层次结构将相同，并且筛选项目复选框将以以下方式支持树状态：check, uncheck 与 indeterminate (子节点的地位不一样). 有关更多信息，请参阅Outline Columns.

创建行筛选

本示例使用代码创建行筛选。

$(document).ready(function ()
{
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
    {sheetCount:3});
    var activeSheet = spread.getActiveSheet();
    activeSheet.setValue(0, 0, "North");
    activeSheet.setValue(1, 0, "South");
    activeSheet.setValue(2, 0, "East");
    activeSheet.setValue(3, 0, "South");
    activeSheet.setValue(4, 0, "North");
    activeSheet.setValue(5, 0, "North");
    activeSheet.setValue(6, 0, "West");
    activeSheet.setColumnWidth(0, 80);
   
    //设置行筛选
    activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter
    (new GC.Spread.Sheets.Range(-1, 0, -1, 1)));
});

筛选行

本示例使用代码筛选行。

$(function () {
            var workbook = new GC.Spread.Sheets.Workbook($("#ss")[0]);
            var activeSheet = workbook.getActiveSheet();
            activeSheet.setRowCount(7);
            activeSheet.setValue(0, 0, "North");
            activeSheet.setValue(1, 0, "South");
            activeSheet.setValue(2, 0, "East");
            activeSheet.setValue(3, 0, "South");
            activeSheet.setValue(4, 0, "North");
            activeSheet.setValue(5, 0, "North");
            activeSheet.setValue(6, 0, "West");
            activeSheet.setColumnWidth(0, 80);
            activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1)));
            $("#button1").click(function(){
                //Filter Column1 by "North".
                var rowFilter = $("#ss").data("workbook").getActiveSheet().rowFilter();
                var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {
                    compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,
                    expected: "North"
                });
                rowFilter.addFilterItem(0, condition);
                rowFilter.filter(0);
            });
            $("#button2").click(function(){
                // Remove filtering for Column1
                var rowFilter = $("#ss").data("workbook").getActiveSheet().rowFilter();
                if(rowFilter){
                    rowFilter.removeFilterItems(0);
                    rowFilter.filter();
                }
            });
        });
//向页面添加按钮控件
<input type="button" id="button1" value="button1"/>
<input type="button" id="button2" value="button2"/>

应用条件筛选

以下代码指定如何在表单中应用条件筛选。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(1, 1, 10, 3)));
var filter = sheet.rowFilter();
filter.filterDialogVisibleInfo({
    sortByValue: false,
    sortByColor: true,
    filterByColor: true,
    filterByValue: true,
    listFilterArea: false
})

获取筛选行状态

本示例使用代码获取行筛选的状态。

$(document).ready(function ()
{
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
    {sheetCount:3});
    var activeSheet = spread.getActiveSheet();
    activeSheet.setValue(0, 0, "North");
    activeSheet.setValue(1, 0, "South");
    activeSheet.setValue(2, 0, "East");
    activeSheet.setValue(3, 0, "South");
    activeSheet.setValue(4, 0, "North");
    activeSheet.setValue(5, 0, "North");
    activeSheet.setValue(6, 0, "West");
    activeSheet.setColumnWidth(0, 80);
   
    // 设置行筛选
    activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter
    (new GC.Spread.Sheets.Range(0, 0, 7, 1)));
   
    $("#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");
        }
    });
});

获取行筛选结果

此示例使用代码获取行筛选结果。

$(function ()
{
   var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
   var activeSheet = spread.getActiveSheet();
   activeSheet.setRowCount(7);
   activeSheet.setValue(0, 0, "North");
   activeSheet.setValue(1, 0, "South");
   activeSheet.setValue(2, 0, "East");
   activeSheet.setValue(3, 0, "South");
   activeSheet.setValue(4, 0, "North");
   activeSheet.setValue(5, 0, "North");
   activeSheet.setValue(6, 0, "West");
   activeSheet.setColumnWidth(0, 80);
   // 设置行筛选
   activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter
   (new GC.Spread.Sheets.Range(0, 0, 7, 1)));
   $("#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));
     });
});        
})

创建自定义筛选

以下代码创建一个自定义筛选。

//创建一个自定义条件。
        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) {
                //Return True only when the following conditions are satisfied.
                // (1)Values已输入
                // (2)Values不低于10.
                // (3)Values不高于50.
                return true;
            } else {
                return false;
            }
        };
        $(function () {
            var workbook = new GC.Spread.Sheets.Workbook($("#ss")[0]);
            var activeSheet = workbook.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);
            $("#button1").click(function(){
                //设置行筛选。
                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);
            });
        });

// 在页面底部添加一个按钮
<input id="button1" type="button" value="Button1"/>