SpreadJS筛选效果与Excel保持一致

       SpreadJS的筛选功能目前是与Excel在设计上有差异的地方，SpreadJS的筛选按钮会添加到选择区域的上一行，而Excel的筛选按钮会添加到选中区域的第一行。

那么为什么会有这样的设计，举个例子，A1到A5是数据，我需要对这些数据做一个筛选。Excel做不到，它只能给A2到A5做筛选，或者在第一行插入一个空行用做放置筛选图标。但SpreadJS可以做到，同时会将筛选图标添加在列头上。那么既然支持这么做，如果添加筛选的方式跟Excel一样的话（选中位置的第一行添加筛选）只可能把筛选图标添加在A1上。基于这个矛盾，我们调整了UI的行为，改为在选中范围的上一行添加筛选图标。这样不仅支持范围更广，还更容易让人理解。


       那么有的时候客户可能会需要更Excel一样的效果，这个时候可以考虑在筛选时候将筛选的range修改一下，使其row 加1，rowCount减1。这样就可以实现跟Excel一样的效果了。      

1. var selection = sheet.getSelections()[0];
   
2.                                   var range = new GC.Spread.Sheets.Range(selection.row+1, selection.col, selection.rowCount-1, selection.colCount);
   
3.                                   var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);

复制代码

      如果是在线表格编辑器中做筛选，就需要更改重写筛选按钮的点击逻辑。点击之后调用自己写的命令，以保证该操作可以被回退。首先，我们将筛选的操作定义成一个命令

1. var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
   
2.                         var spread = designer.getWorkbook();
   
3.                         var sheet = spread.getActiveSheet();
   
4.                         var commandManager = spread.commandManager();
   
5.                         var command = {
   
6.                           canUndo: true,
   
7.                           execute: function (context, options, isUndo) {
   
8.                                 var Commands = GC.Spread.Sheets.Commands;
   
9.                                 options.cmd = "SetRowFilter";
   
10.                                 if (isUndo) {
    
11.                                   Commands.undoTransaction(context, options);
    
12.                                   return true
    
13.                                 } else {
    
14.                                   Commands.startTransaction(context, options);
    
15.                                   var sheet = context.getSheetFromName(options.sheetName);
    
16.                                   var selection = sheet.getSelections()[0];
    
17.                                   var range = new GC.Spread.Sheets.Range(selection.row+1, selection.col, selection.rowCount-1, selection.colCount);
    
18.                                   var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
    
19.                                   sheet.rowFilter(rowFilter);
    
20.                                   Commands.endTransaction(context, options);
    
21.                                   return true
    
22.                                 }
    
23.                           }
    
24.                         };
    
25.                         commandManager.register("SetRowFilter", command);

复制代码

详情见附件demo

需要注意的是：附件demo中只重写了筛选按钮的逻辑，没有写清除和重新应用的逻辑，这里有需要的同学可以自行进行扩展。