数据持久化
VTable-Sheet提供了状态持久化能力,使用户可以保存和恢复表格的各种状态,包括过滤条件、选择区域、活动表格页等。本章介绍如何实现表格状态的持久化。
基本概念
数据持久化是指将表格的当前状态(包括数据和用户操作)保存起来,以便在后续使用时能够恢复到相同的状态。这在需要保留用户操作历史或实现自动保存功能时非常有用。
保存表格状态
VTableSheet提供了saveToConfig方法,可以将当前的表格状态导出为配置对象(以保存到localStorage为例):
// 获取当前表格的完整配置(包含所有状态) const currentConfig = sheetInstance.saveToConfig(); // 将配置对象转换为JSON字符串 const configJson = JSON.stringify(currentConfig); // 保存到localStorage 或者后端接口保存等 localStorage.setItem('vtable-sheet-state', configJson);
恢复表格状态
可以使用保存的配置重新创建表格,恢复之前的状态(以从localStorage获取保存的配置为例):
// 从localStorage获取保存的配置 或者从后端接口获取 const savedConfigJson = localStorage.getItem('vtable-sheet-state'); if (savedConfigJson) { try { // 解析JSON字符串为配置对象 const savedConfig = JSON.parse(savedConfigJson); // 使用保存的配置创建新的表格实例 const sheetInstance = new VTableSheet.VTableSheet(document.getElementById(CONTAINER_ID), savedConfig); } catch (error) { console.error('恢复表格状态失败:', error); // 使用默认配置 const sheetInstance = new VTableSheet.VTableSheet(document.getElementById(CONTAINER_ID), defaultConfig); } } else { // 没有保存的状态,使用默认配置 const sheetInstance = new VTableSheet.VTableSheet(document.getElementById(CONTAINER_ID), defaultConfig); }
保存的状态内容
saveToConfig方法可以保存的状态有:
- 各个工作表的数据
- 过滤条件
- 当前激活的工作表
- 公式设置
- 合并单元格状态
- 冻结行列
待开发实现的保存状态有:
- 单元格选择状态
- 表格结构配置(行高、列宽等)
使用示例:简单的持久化功能
以下是一个简单的 表格状态持久化示例: