筛选效果与Excel保持一致

问题：SpreadJS筛选效果如何与excel保持一致？

背景：

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

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

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

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

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

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
                        var spread = designer.getWorkbook();
                        var sheet = spread.getActiveSheet();
                        var commandManager = spread.commandManager();
                        var command = {
                          canUndo: true,
                          execute: function (context, options, isUndo) {
                                var Commands = GC.Spread.Sheets.Commands;
                                options.cmd = "SetRowFilter";
                                if (isUndo) {
                                  Commands.undoTransaction(context, options);
                                  return true
                                } else {
                                  Commands.startTransaction(context, options);
                                  var sheet = context.getSheetFromName(options.sheetName);
                                  var selection = sheet.getSelections()[0];
                                  var range = new GC.Spread.Sheets.Range(selection.row+1, selection.col, selection.rowCount-1, selection.colCount);
                                  var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
                                  sheet.rowFilter(rowFilter);
                                  Commands.endTransaction(context, options);
                                  return true
                                }
                          }
                        };
                        commandManager.register("SetRowFilter", command);

详情见附件demo。

purejs.zip

作者: Clark.Pan | 审核：Ellia.Duan | 更新时间：2023.12.13