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

为什么这个细节重要

复杂模板的问题通常不是“功能不够”，而是“入口太散”。产品经理关心的是用户能不能快速定位报表模块；开发者关心的是对象结构能不能被程序遍历；业务用户关心的是别让我在几十个标签里来回试。这个导航视图把 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。

var config = GC.Spread.Sheets.Designer.DefaultConfig;
GC.Spread.Sheets.Designer.Designer.<span>RegisterComponent</span>(<span>"MyComponent"</span>, MyTemplateComponent);
​
config.commandMap = {
  SheetNavi: {
    text: <span>"sheet导航"</span>,
    execute: context => context.<span>setData</span>(<span>"CData"</span>, !context.<span>getData</span>(<span>"CData"</span>))
  }
};
​
GC.Spread.Sheets.Designer.<span>registerTemplate</span>(<span>"searchTemplate"</span>, searchTemplate);
config.sidePanels.<span>push</span>({
  position: <span>"right"</span>,
  width: <span>"315px"</span>,
  command: <span>"searchPanelCommand"</span>,
  uiTemplate: <span>"searchTemplate"</span>,
  showCloseButton: <span>true</span>
});
designer.<span>setConfig</span>(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 的侧边栏扩展则让这些元素有了自然的入口。