# 操作
每当用户在表格上做操作,一个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, replace 或 remove 表达的操作, 因为用它们表达产生的op过大, 不适合作为op使用.
# insertRowCol
代表用户做了插入行列操作。
此时 value 的格式为:
{
type: "row" | "column";
index: number;
count: number;
direction: "lefttop" | "rightbottom";
id: string;
}
where
| 名称 | 描述 |
|---|---|
| type | row 或 column |
| index | 要插入行列的起始位置 |
| count | 插入的数量 |
| direction | 插入的方向,lefttop 或 rightbottom |
| id | 当前操作表格的id |
# deleteRowCol
代表用户做了删除行列操作。
此时 value 的格式为:
{
type: "row" | "column";
start: number;
end: number;
id: string;
}
其中
| 名称 | 描述 |
|---|---|
| type | row 或 column |
| start | 删除行列的起始位置 |
| end | 删除行列的终止位置 |
| id | 当前操作表格的id |
# addSheet
代表用户做了新增表格操作。
此时 value 是新表格的完整数据。
# deleteSheet
代表用户做了删除表格操作。
此时 value 的格式为:
{
id: string;
}
其中
| 名称 | 描述 |
|---|---|
| id | 要删除的表格id |