用 Sheet 页导航视图管理复杂 SpreadJS 工作簿

一个工作簿只有两三个 Sheet 时，底部标签页已经够用；但一旦模板里有数据透视表、Table、图表、图片、形状和区域快照，用户往往知道"我要找那张表"，却不知道它藏在哪个 Sheet。Sheet页导航视图 这个 demo 的价值就在这里：把 SpreadJS Designer 里的工作簿内容整理成右侧树形导航，让人按名称搜索、展开、点击，并直接跳到对应对象。

为什么这个细节重要

复杂模板的问题通常不是"功能不够"，而是"入口太散"。产品经理关心的是用户能不能快速定位报表模块；开发者关心的是对象结构能不能被程序遍历；业务用户关心的是别让我在几十个标签里来回试。这个导航视图把 Sheet、Table、PivotTable、Shape 等对象集中到一棵树里，相当于给 Excel-like 工作簿加了一个目录。

它尤其适合报表设计器、预算模板、巡检台账、设备清单、财务合并表这类"一个文件包含多个业务块"的应用。用户点击 Sheet 节点时，代码调用 setActiveSheet 切换工作表；点击子对象时，再选中对应区域或形状。体验上像文档大纲，但底层仍然是 SpreadJS 的 Workbook、Worksheet 和对象模型。

SpreadJS 的实现思路

demo 先创建 GC.Spread.Sheets.Designer.Designer，再通过 designer.getWorkbook() 取得工作簿。导航本身不是浮在页面外的普通面板，而是接入 Designer 配置：扩展 DefaultConfig.commandMap，在 ribbon 上添加 SheetNavi 按钮，注册 searchTemplate，再把侧边栏配置推入 config.sidePanels。

arduino 复制代码

var config = GC.Spread.Sheets.Designer.DefaultConfig;
GC.Spread.Sheets.Designer.Designer.RegisterComponent("MyComponent", MyTemplateComponent);

config.commandMap = {
  SheetNavi: {
    text: "sheet导航",
    execute: context => context.setData("CData", !context.getData("CData"))
  }
};

GC.Spread.Sheets.Designer.registerTemplate("searchTemplate", searchTemplate);
config.sidePanels.push({
  position: "right",
  width: "315px",
  command: "searchPanelCommand",
  uiTemplate: "searchTemplate",
  showCloseButton: true
});
designer.setConfig(config);

真正生成目录的是自定义组件。它在 onMounted 中通过 hostSpread.getSheetCount() 遍历所有工作表，再分别读取 sheet.tables.all()、sheet.pivotTables.all()、sheet.shapes.all()。Table 和 PivotTable 会拿到区域并调用 sheet.setSelection，形状则遍历后用 shape.isSelected(true) 选中目标。

可以扩展到哪些场景

这个思路可以扩展成模板目录、报表对象搜索、审计定位、图表资产管理、跨 Sheet 数据块导航。对于需要交付给业务人员长期维护的模板，还可以把搜索结果和权限结合起来：普通用户只看可填写区域，管理员能看到数据源、隐藏表、透视表和形状。

需要注意的是，demo 里的树节点由 DOM 手动拼装，适合展示实现路径。生产环境可以把对象摘要抽成数据结构，再交给统一的 UI 组件渲染；同时要考虑重命名对象、删除对象后的刷新机制。

给开发者的关键词

SpreadJS、Designer、DefaultConfig、commandMap、registerTemplate、RegisterComponent、sidePanels、tables.all()、pivotTables.all()、shapes.all()、setActiveSheet、setSelection、JavaScript 电子表格控件。

小结

Sheet页导航视图 展示的是一种很实用的产品能力：当表格从"单页录入"变成"复杂工作簿应用"时，导航本身就是功能的一部分。SpreadJS 的对象模型让开发者能读到 Sheet 内部元素，Designer 的侧边栏扩展则让这些元素有了自然的入口。