区域分组状态的存储与恢复：基于SpreadJS的解决方案

在一组数据中，如果有一个或多个属性的取值范围局限在固定数值内，那么这些属性既可作为分组条件将数据区域分组。比如，一个班级内的学生来自陕西、山西、甘肃、**等省，将籍贯省份相同的学生归为一组，可将该班级学生分为4个群体。每个省内的同学或许又来自不同地市，如陕西的同学又来自西安、延安、榆林等市的，山西的同学有来自太原、临汾、运城等市的，甘肃的同学有来自兰州、天水、庆阳等地的，**的同学来自呼和浩特、包头、鄂尔多斯等市。那么，再进一步将每个省的学生再根据地市分组，在地市内再分组到县域，如此便可得到一个班级学生的籍贯画像，呈现出省-市-显的分级结构，也是树结构。将已经分组好的数据录入至SpreadJS后，通过在行列头部设置区域分组可以达到上述数据分级的效果。对于每一个分组内的数据，通过折叠按钮即可控制分组内数据是否可见，当折叠时仅可见分组的摘要信息，展开即可见分组内所有数据。

如果每个学生都有权限在线访问这样结构的SpreadJS文件，在浏览过程中可能会点击折叠按钮以折叠或展开某些分组，那么每个学生再次打开该文件时看到的分组结构应该是其上次关闭前的形式。每个学生的操作不同，可以为每个学生保留一份文件，系统根据操作用户的信息在服务器读取其对应的文件并渲染在浏览器页面。如果学生数量较多，那么文件的个数也呈线性增长，虽然不见得会对服务器的存储性能和访问性能有多么严重的影响，但是确实浪费了存储资源。为什么说浪费了存储资源呢？在这个场景中，每个学生能都看到的数据是相同的，不同之处在于各分级的折叠或展开状态，这些折叠或展开状态才与具体的学生个体相关。那么，完全可以为每个学生记录并保存其在浏览数据文件时对分级折叠或展开状态的更改情况，在学生打开文件时获取其对应的更改情况并以此设置分级结构并渲染在浏览器页面。也就是说，保留一份原始文件和与若干个学生的操作相关的分级更改信息。

根据上述方案，继续分析该方案的可行性，有三个问题摆在眼前：
1. 如何记录学生更改的分级折叠或展开状态。
2. 如何保存分级状态更改信息。
3. 如何根据分级状态更改信息重新设置分级状态。

我们发现，SpreadJS定义了一个用以监听区域分组状态变更的事件--RangeGroupStateChanged事件，通过该事件可知状态变更的分组索引（index）、级别（level）、类别（行或列分组标记isRowGroup），需要记录的信息除了上述三个属性外还需额外增加折叠或展开状态（isCollapsed），这样便记录了用以设置下次打开文件时工作表分组结构的详细信息。每个学生各自有独立的电脑或手机设备访问系统或文件，可以将每个学生对应的分级状态更改信息保存在后端服务器，通过学生身份信息建立映射关系以便于存储和检索。最后呢，在学生A打开文件时，系统从后端服务器根据学生A的身份信息（如ID、姓名等）检索其对应的分组状态更改信息，在成功读取文件后通过Outline:setCollapsed()将分组状态更改信息作用在工作表上渲染出相应的分级结构。

除了将学生们的分组状态更改信息保存至后端服务器上部署的服务器中，在调试阶段，也可以将其保存至浏览器的localStorage中。本文以localStorage为例，提供了附件中的demo以供学习交流。