!!!###!!!title=数据持久化——VisActor/VTable 教程文档!!!###!!!!!!###!!!description=VTable-Sheet提供了状态持久化能力,使用户可以保存和恢复表格的各种状态,包括过滤条件、选择区域、活动表格页等。本章介绍如何实现表格状态的持久化。!!!###!!!

数据持久化

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方法可以保存的状态有:

  • 各个工作表的数据
  • 过滤条件
  • 当前激活的工作表
  • 公式设置
  • 合并单元格状态
  • 冻结行列

待开发实现的保存状态有:

  • 单元格选择状态
  • 表格结构配置(行高、列宽等)

使用示例:简单的持久化功能

以下是一个简单的表格状态持久化示例: