在 SpreadJS 中实现工作表导航：从数据获取到交互设计

Microsoft Excel工作表导航功能能够提取工作簿内每个工作表中的表格（Table）、数据透视表（PivotTable）、图表（Chart）、图片、形状（Shape）等元素，并将其摘要信息以树的形式罗列显示，当点击某元素信息时，工作簿跳转至该元素所在工作表，并聚焦在该元素上，如图1所示。

（图1. Excel 工作表导航）

那么SpreadJS是否支持自定义开发实现该功能呢？撰写本文的目的正是为了介绍在SpreadJS中如何利用现有功能或产品设计自定义开发实现该功能，因此答案显然是“支持”。接下来，我们一起走进工作表导航自定义实现方案。

我们来分析下工作表导航功能的要素，参考Microsoft Excel官网对该功能的介绍，包含以下需求项：

1. 罗列工作簿内每个工作表中的元素。

2. 点击某元素可以跳转至相关工作表并聚焦该元素。

3. 导航面板支持模糊搜索匹配工作表元素。

首先，需要确定SpreadJS是否能够获取工作表中的上述元素信息。SpreadJS对上述元素均抽象了独立的管理器，比如TableManager管理Table实例，PivotTableManager管理PivotTable实例，ChartCollection管理Chart实例、ShapeCollection管理Shape实例，如图2所示。由于17.0.0版本优化了图表Chart实现，图表不再是基于DOM元素的浮动对象，而是作为一种形状存在，所以图表Chart实例也可由ShapeCollection管理。以上，便可确定，通过各类型元素的管理器便可获取工作表中对应类型的各元素。

（图2.工作表元素管理）

其次，各类型元素的管理器可以以元素名称为检索依据快速获取元素实例。以Table为例，TableManager:findByName()根据Table名称获取Table实例，Table实例中包含了Table所在单元格区域，Worksheet:setSelection()便可选中区域，聚焦该区域。PivotTable同理，PivotTable整体布局在工作表中，占据一片连续的单元格区域，通过PivotTable:getRange()即可得到数据透视表所在单元格区域。形状Shape实体悬浮在工作表图层上一层，并不占据单元格，便无法通过Worksheet:setSelection()聚焦。然而，ShapeBase:isSelected()可聚焦选中调用者形状实例。

至此，SpreadJS便提供了完整的工作表元素管理能力，凭借此能力可以增删和访问元素。如何以树的形式布局这些元素，呈现一个清晰直观的树结构，以供用户快速了解工作表以及工作簿元素组成全貌呢？此外，如何同时提供交互能力呢？

我们来看一下Microsoft Excel中工作表导航的布局结构，如图3所示，工作表视图区域右侧显示一设置面板，面板内自上而下分为两部分，包括搜索输入栏和工作表元素信息列表树。

（图3.工作表导航面板）

我们知道SpreadJS中的各个设置面板均为IDialogTemplate实例，且SpreadJS公开了IDialogTemplate结构标准以支持自定义扩展。在此，我们可以参考AtmoicComponentBase标准自定义原子组件，这便是工作表元素列表树的布局容器，在容器内自上而下依次创建DOM元素封装每一级树节点，以形成工作表树元素列表树。树包括两级节点，父节点显示工作表名称，代表一个工作表实例；相应地，子节点即工作表内的诸多元素名称。在定义工作表元素布局的同时，定义搜索框的模糊搜索逻辑，展开父节点以显示符合搜索关键字的匹配项，当键入或删除新字符后导致当前匹配项中部分项不再匹配时，隐藏相关项并折叠无匹配项的父节点。

工作表导航面板既已实现，再考虑该面板显示与否的控制要求。Microsoft Excel的工作表导航功能位于工具栏-->视图-->显示-->导航，参考此路径，在工具栏-->视图选项卡中新增自定义功能按钮，设置图标以诉诸该图标为工作表导航功能按钮，如图4所示。

图4. 工作表导航按钮

对该自定义功能按钮定义相应的命令，在该按钮被点击时触发，通过切换工作表导航面板对应的命令的visibleContext属性值控制面板可见性。

至此，便利用SpreadJS的元素管理能力自定义实现了与Microsoft Excel相似的工作表导航功能，如图5所示。附上demo，以供参考。

（图5.SpreadJS工作表导航）

工作表导航.html