Alt + PageDown实现横向换页：让 SpreadJS 宽表更接近 Excel 操作习惯

宽表是很多业务系统绕不开的界面：销售明细有几十个字段，预算表按月份横向展开，排班表一眼看不到年底，设备台账右侧还有状态、价格、责任人。鼠标拖动横向滚动条很慢，方向键又只能一点点移动。这个 demo 用 SpreadJS 的命令系统补了一个小但很顺手的能力：按 Alt+PageDown 向右翻一屏，按 Alt+PageUp 向左翻一屏。

为什么这个细节重要

对普通用户来说，宽表最烦人的不是信息多，而是"移动成本高"。用户每次拖滚动条，都要中断正在看的数据关系。对产品经理来说，键盘翻页能把复杂报表的浏览路径变短，尤其适合高频使用的运营、财务、供应链场景。对开发者来说，这个 demo 展示了 SpreadJS 不只是提供默认交互，还允许用 commandManager().register 把业务需要的键盘行为注册进去。

它的意义也不只是复制 Excel 快捷键。很多 Web 表格只保留了基础滚动，却忽略了专业表格用户的肌肉记忆。用户不用重新学习，就能把桌面表格里的浏览方式带到浏览器里，这会明显降低迁移成本。

SpreadJS 的实现思路

demo 先用 sheet.setColumnCount(500) 创建一个足够宽的工作表。随后定义 pageDown 和 pageUp 两个命令对象。命令的 execute 方法里，先通过 GC.Spread.Sheets.Commands.startTransaction 开始事务，再调用 context.getActiveSheet().scroll(0, distance) 做横向滚动，最后用 endTransaction 收尾。

滚动距离不是写死的列数，而是用 context.getHost().clientWidth 取得容器宽度，再减去行头区域宽度 getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader)。这样得到的距离更接近"一屏"，在不同容器宽度下也比较自然。

JavaScript 复制代码

const sheet = spread.getActiveSheet();
sheet.setColumnCount(500);

const pageDown = {
  canUndo: false,
  execute(context, options) {
    const Commands = GC.Spread.Sheets.Commands;
    Commands.startTransaction(context, options);
    context.getActiveSheet().scroll(
      0,
      context.getHost().clientWidth -
        context.getActiveSheet().getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader)
    );
    Commands.endTransaction(context, options);
    return true;
  }
};

spread.commandManager().register("pageDown", pageDown, 34, false, false, true, false);

可以扩展到哪些场景

这个能力适合销售流水、预算模型、项目排期、横向指标看板、年度计划表。也可以把一屏滚动改成半屏、两屏，或者按业务分组滚动，比如从"基础信息"跳到"合同信息"，再跳到"回款信息"。如果系统有冻结列，还要确认翻页距离与冻结区域的视觉关系，避免用户以为数据列错位。

demo 中 canUndo: false 是合理的，因为滚动只是视图状态，不是数据修改。真正进入撤销栈的应该是编辑、粘贴、格式变更等会影响工作簿内容的动作。

给开发者的关键词

SpreadJS、JavaScript 电子表格控件、Workbook、Worksheet、commandManager().register、GC.Spread.Sheets.Commands.startTransaction、sheet.scroll、getHost().clientWidth、SheetArea.rowHeader、PageDown keyCode 34、PageUp keyCode 33、Alt 横向换页。

小结

宽表体验不只靠更大的屏幕解决。把常用键盘路径补上，能让复杂表格从"能看"变成"好浏览"。这个 demo 给出的就是一条很实用的扩展路线：用 SpreadJS 命令系统，把用户熟悉的操作重新接回 Web 表格。