SpreadJS筛选效果与Excel保持一致

收藏

本帖最后由 Lynn.Dou 于 2023-3-14 12:13 编辑

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

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

		自动登录	找回密码
密码			立即注册

SpreadJS筛选效果与Excel保持一致

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄