# 操作
每当用户在表格上做操作,一个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 |