# 操作

每当用户在表格上做操作,一个Op列表会通过onOp回调发出。op描述了如何从当前数据修改为用户操作后的新数据的步骤。例如,当用户在A2单元格上设置了加粗,生成的op如下:

[
    {
        "op": "replace",
        "id": "0",
        "path": ["data", 1, 0, "bl"],
        "value": 1
    }
]

op对后端数据修改和同步在线协同数据非常有用。

我们在 backend-demo 目录中展示了一个例子,使用 Express (后端) and MongoDB (数据库) 实现。

通过 node index.js 运行后端服务器,然后访问 Collabration example (opens new window) 即可体验。

可通过 http://localhost:8081/init 初始化数据

# 格式

每个 Op 的格式如下

{
    "op": string,
    "id": string,
    "path": any[],
    "value": any
}

其中

描述
op 操作名, 应为 add, remove, replce, insertRowCol, deleteRowCol, addSheet, deleteSheet 其中之一
id 当前Sheet的id
path 要更新数据的路径
value 更新的数据

# 操作名

名称 描述
add 在path添加值
replace 在path替换值
remove 在path删除值
insertRowCol 特殊op, 查看 insertRowCol
deleteRowCol 特殊op, 查看 deleteRowCol
addSheet 特殊op, 查看 addSheet
deleteSheet 特殊op, 查看 deleteSheet

# 特殊op

特殊op是一些无法用 add, replaceremove 表达的操作, 因为用它们表达产生的op过大, 不适合作为op使用.

# insertRowCol

代表用户做了插入行列操作。

此时 value 的格式为:

{
  type: "row" | "column";
  index: number;
  count: number;
  direction: "lefttop" | "rightbottom";
  id: string;
}

where

名称 描述
type rowcolumn
index 要插入行列的起始位置
count 插入的数量
direction 插入的方向,lefttoprightbottom
id 当前操作表格的id

# deleteRowCol

代表用户做了删除行列操作。

此时 value 的格式为:

{
  type: "row" | "column";
  start: number;
  end: number;
  id: string;
}

其中

名称 描述
type rowcolumn
start 删除行列的起始位置
end 删除行列的终止位置
id 当前操作表格的id

# addSheet

代表用户做了新增表格操作。

此时 value 是新表格的完整数据。

# deleteSheet

代表用户做了删除表格操作。

此时 value 的格式为:

{
  id: string;
}

其中

名称 描述
id 要删除的表格id