新冠病毒的疫情使得在线办公成为了一个常态,这使得在线文档成为了时下的热点。其中在线协同表格是在线文档的重要一个组成部分,纯前端表格在在线协同表格上有着得天独厚的优势:本身已经实现了单人操作在线文档的基本功能,并且身为控件,用户只需引入就可以在项目工程中为特性的业务赋予在线表格的能力。这样开发者在使用本文介绍内容后,只需要在其基础上自行实现对应的协同功能,就可以将本身的单人操作变为协同操作。

最近也有很多学员想要通过我们的命令来作为协同的主要实现手段,但是参考了一些教程之后,发现有些操作无法进行同步,例如粘贴以及粘贴之后的撤销操作。这篇教程主要就是分享这个实现思路。

正式开始内容介绍之前,我们先为大家介绍命令机制。

通过监听命令来实现简单的协同操作

何为命令机制:

命令就是将一步或多步的操作封装成一个可以执行的命令,执行这样的命令并传入对应的参数,就可以执行相关的一连串操作。并且操作的对象或范围均可以通过参数的调整来指定。命令的相关方法调用参考下面的API:

https://demo.grapecity.com.cn/spreadjs/help/latest/content/SpreadJS~GC.Spread.Commands.CommandManager.html

命令究竟有什么实际的意义呢?

首先,纯前端表格默认会将所有的用户UI操作封装成命令去执行(内置命令),而我们通常的代码设置并没有通过命令来执行。这样就可以用来区分一个操作到底是用户UI操作(最终用户使用时的操作),还是代码逻辑进行的操作(程序员通过写代码完成,即程序内部的运行逻辑)。

其次,命令本身可以设置是否可以被撤销(undo),结合上一条就可以做到将用户的操作进行撤销,但是程序执行的代码操作不会被进行撤销的操作。在实际应用中有很重要的价值,举个例子:

SpreadJS默认初始化的电子表格是一个空表格,我们经常遇到打开页面后需要加载一个有数据的表格这样的场景,我们往往会将表格初始化的操作通过代码在js中运行来实现这样的效果。当我们加载好表格之后,在页面上按ctrl+z进行撤销,会发现设置的表格不会被撤销。这就是因为程序执行的代码操作不是命令所以不会被撤销的结果。而用户在表格上修改的任何操作均可以被撤销,撤销的同时不会影响之前代码设置这部分的内容。

命令对于在线协同的应用:

命令的机制我们可以分清操作到底是代码执行的还是用户UI去操作的,而在线协同的场景中需要同步的内容就是用户UI的相关操作。所以我们只需要有一个监听的机制,能监听到所有的命令,然后按照顺序进行同步,就可以做到一个简单的在线协同操作了。

而在命令command中是可以添加一个anyscLicenser用于收集用户操作触发的命令的:

spread.commandManager().addListener("anyscLicenser",function(){
for(var i=0;i<arguments.length;i++){
var cmd = arguments[i].command;
console.log(cmd);
}
});

通过这样的监听,我们就可以实现一个简单的多人同步的效果。而命令本身是可以自定义的,我们可以将提供给用户操作的接口(input,按钮,下拉等)的实现逻辑封装成一个个自定义命令,就像附件的demo这样。这样就可以做到通过命令来收集用户在表格上的操作,来完成一个简单的协同。

这里要注意的是,虽然有命令这样的机制,但其初衷并不是为了协同而设置的,所以有些情况下源生的命令并不能完全的符合协同的实现,需要根据实际情况自己进行改造来满足。提供的demo以及命令实现的方式可当做思路可供参考。

demo下载地址:https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=ODY2MjZ8OTBlY2E0NWF8MTY3MTc5MzE5Mnw2MjY3Nnw3NTM0Nw%3D%3D

可粘贴柯撤销的多人协同

那最原始通过命令的方式为什么无法将粘贴命令同步呢?因为对于clipboardPaste命令,禁止将工作表的一个区域从工作簿复制到另一个工作簿,但允许外部粘贴。因此,有一种解决方法可以重置命令选项的fromSheet和fromRanges。附上核心代码

  var undoManager1 = spread1.undoManager();
var oldExecute = commandManager.execute;
commandManager.execute = function () {
console.log(arguments,'execute');
excute(...arguments)
return oldExecute.apply(this, arguments);
}; var undoManager = spread.undoManager();
var oldUndo = undoManager.undo;
undoManager.undo = function () {
undo(...arguments)
return oldUndo.apply(this, arguments);
};
var oldRedo = undoManager.redo;
undoManager.redo = function () {
redo(...arguments)
return oldRedo.apply(this, arguments);
}; // websocket 接受端执行
const redo =function (params){
console.log(params,'params');
undoManager1.redo.apply(undoManager1, [params]); }
const undo =function (params){
console.log(params,'params');
undoManager1.undo.apply(undoManager1, [params]); }
const excute = (params)=>{
console.log(params,'params');
var params1 = params;
if(params1.cmd === 'clipboardPaste'){
params1 = Object.assign({}, params1);
params1.fromSheet=spread1.getSheetFromName(params1.sheetName);
}
commandManager1.execute.apply(commandManager1, [params1]);
}

demo下载地址:https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjI1NTE3fDE4NGM0YWY3fDE2NzE3OTMxNzZ8NjI2NzZ8MTUyMTAw

大家如果感兴趣自行按照demo下载地址体验即可。

拓展阅读

React + Springboot + Quartz,从0实现Excel报表自动化

电子表格也能做购物车?简单三步就能实现

使用纯前端类Excel表格控件SpreadJS构建企业现金流量表

后疫情办公时代——你需要的多人同步协同编辑Demo(可粘贴可撤销)的更多相关文章

  1. 后移动互联网时代:到底还要不要开发一个App?

    后移动互联网时代,到底是什么样的一个时代? 首先,后移动互联网时代中,产生头部应用的几率变小了,像微信这样巨头式的App很难在产生第二个.其次,后移动互联网时代,物联网发展迅速,所有的智能硬件都需要一 ...

  2. 开源OA办公系统的“应用市场”,能够为协同办公开拓什么样的“前路”?

    在我们的日常生活中,应用市场这个词,总是与智能手机划上等号,不管使用的是iPhone还是安卓,总会接触到手机上的APP应用市场,我们可以在应用市场中,选择自己所需要的APP应用软件,下载使用后,可以让 ...

  3. 后Low Code时代:聚焦和突破

    很多人都不想被贴上标签,我曾经也一样.觉得青春不能被定义,人也不能被分类.但随着学习和工作的变迁,慢慢开始发现标签也是一种名片效应. 比如一个做汽车销售的朋友,他就对BMW的车型非常熟悉,可以说是懂车 ...

  4. K2 BPM打造企业新门户,步入移动办公时代

    公司介绍步步高教育电子有限公司(前身为步步高电脑电玩厂)是广东步步高电子工业有限公司属下的三个分公司之一,一直致力于面向广大学生的教育电子产品的研发与生产,主要产品有视频学习机.点读机.学生电脑.语言 ...

  5. VPS搭建离线下载服务器——后网盘时代

    动机 由于学习的需要,在国外某服务器厂商购买了vps服务(至于是哪个厂商就不说啦).但是呢,就算用作梯子,一个月1T的流量总是用不完.最经觉得自己营养充足,想找点电影看看. 无奈现在百度网盘的速度真的 ...

  6. 自己通过centos6.5配置NFS 成功后的笔记,希望对需要的人有点点帮助吧!

         环境介绍:            服务器:centos  172.16.250.170            客户端:centos  172.16.250.172     先用rpm -qa ...

  7. 基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程

    大家好,又见面了. 在构建业务系统的时候,经常会涉及到对附件的支持,继而又会引申出对附件在线预览.在线编辑.多人协同编辑等种种能力的诉求. 对于人力不是特别充裕.或者项目投入预期规划不是特别大的公司或 ...

  8. springboot中使用kindeditor富文本编辑器实现博客功能

    kindeditor在之前已经用过,现在在springboot项目中使用.并且也在里面使用了图片上传以及回显等功能. 其实主要的功能是图片的处理:kindeditor对输入的内容会作为html标签处理 ...

  9. LaTeX 修订

    LaTeX多人协同编辑的时候,修订起来与word相比较而言麻烦一些.不过随着技术的发展和需求的增多,会有越来越多的工具支持LaTeX的修订. (1)在线LaTeX ShareLaTeX是一个很优秀的在 ...

  10. “云”端的语雀:用 JavaScript 全栈打造商业级应用

    作者|  不四(死马)蚂蚁金服 语雀产品技术负责人 语雀是什么? 语雀是一个专业的云端知识库,面向个人和团队,提供与众不同的知识管理,打造轻松流畅的工作协同,它提供各种格式的在线文档(富文本.表格.设 ...

随机推荐

  1. [笔记] 兰道定理 Landau's Theorem

    兰道定理的内容: 一个竞赛图强连通的充要条件是:把它的所有顶点按照入度d从小到大排序,对于任意\(k\in [0,n-1]\)都不满足\(\sum_{i=0}^k d_i=\binom{k+1}{2} ...

  2. [题解] Atcoder ARC 142 D Deterministic Placing 结论,DP

    题目 (可能有点长,但是请耐心看完,个人认为比官方题解好懂:P) 首先需要注意,对于任意节点i上的一个棋子,如果在一种走法中它走到了节点j,另一种走法中它走到了节点k,那么这两种走法进行完后,棋子占据 ...

  3. ToroiseGit/GitBash 设置提交信息模板设置

    一.背景:当使用git提交代码时,每次的提交信息固定,却又比较长不好记的时,还需要将模板的地址保存下来,如果能设置一个固定的模板就可以很好的解决这个问题. 提交前的提交信息需要手动输入: 二.Toro ...

  4. git(新)

    Git仓库的工作分区 工作区到暂存区的操作 git init :在当前文件夹创建一个文档库,自动产生一个master分支.当当前文件夹已有文档库时,不会再次创建也不会修改,只会将隐藏的.git文件夹显 ...

  5. ULID规范解读与实现原理

    前提 最近发现各个频道推荐了很多ULID相关文章,这里对ULID的规范文件进行解读,并且基于Java语言自行实现ULID,通过此实现过程展示ULID的底层原理. ULID出现的背景 ULID全称是Un ...

  6. 累加和为 K 的子数组问题

    累加和为 K 的子数组问题 作者:Grey 原文地址: 博客园:累加和为 K 的子数组问题 CSDN:累加和为 K 的子数组问题 题目说明 数组全为正数,且每个数各不相同,求累加和为K的子数组组合有哪 ...

  7. javascript编程单线程之异步模式Asynchronous

    异步模式Asynchronous 不会等待这个任务结束才开始执行下一个任务,开启之后立即执行下一个任务,后续逻辑一般会通过回调函数的方式定义,异步模式对js 非常重要,没有异步任务单线程的 js 语言 ...

  8. Linq--取group分组后的每组第一条数据

    Linq对指定字段分组并取每组第一个值 先排序后分组 目的:取每个RequestID组内的最大HistoryID的数据 //对RequestID进行分组降序排序,去每组的第一条数据 IList< ...

  9. C#中下载项目中的文件

    1.将需要下载的文档添加到项目的文件夹中 2.接口部分 public IActionResult DownLoad() { var filePath = Directory.GetCurrentDir ...

  10. 看了同事这10个IDEA神级插件,我也悄悄安装了

    昨天,有读者私信发我一篇文章,说里面提到的 Intellij IDEA 插件真心不错,基本上可以一站式开发了,希望能分享给更多的小伙伴,我在本地装了体验了一下,觉得确实值得推荐,希望小伙伴们有时间也可 ...