当前位置: 首页 > Web前端 > JavaScript

后疫情办公时代-你需要多人同步协同编辑Demo(可粘贴可撤销)

时间:2023-03-26 20:36:20 JavaScript

新冠病毒的流行让在线办公成为常态,这让在线文档成为时下的热门话题。其中,在线协作表是在线文档的重要组成部分。纯前端形式在在线协作形式中具有得天独厚的优势:实现了单人操作在线文档的基本功能,并且作为控件,用户只需导入即可。在项目工程中,将在线表格的能力赋予了特性的业务。这样,开发者在使用本文介绍的内容后,只需要在此基础上实现相应的协同功能,就可以将单人操作变成协同操作。最近很多同学想把我们的命令作为主要的协作手段,但是在参考了一些教程后发现有些操作是不能同步的,比如粘贴,粘贴后撤消。本教程主要是分享这个实现思路。在正式开始内容介绍之前,我们先给大家介绍一下命令机制。什么是命令机制:命令就是将一个或多个步骤的操作封装成一个可执行的命令,执行这样的命令并传入相应的参数,就可以进行一系列相关的操作。并且可以通过调整参数来指定操作的对象或范围。该命令相关的方法调用可参考如下API:https://demo.grapecity.com.cn...该命令的实际含义是什么?首先,纯前端表格会将所有用户UI操作封装成命令默认执行(内置命令),而我们平时的代码设置并不是通过命令来执行的。这样就可以用来区分一个操作是用户UI操作(终端用户使用时的操作)还是代码逻辑执行的操作(程序员写代码完成,即内部操作)程序逻辑)。其次,命令本身可以设置是否可以撤销(undo)。结合上一个,用户的操作可以撤销,但是程序执行的代码操作不会撤销。在实际应用中具有很大的价值。例如,SpreadJS初始化的电子表格默认是一个空表格。我们经常会遇到打开页面后需要加载表单数据的场景。我们经常初始化表单。运行js中的代码来实现这样的效果。我们载入表格后,在页面中按ctrl+z撤消,我们会发现设置的表格不会被撤消。这是因为程序执行的代码操作不是命令,无法撤消。用户在窗体上修改的任何操作都可以撤销,撤销不会影响之前代码设置的内容。命令在在线协作中的应用:通过命令机制,我们可以区分操作是代码执行的还是用户UI执行的。在线协作场景下,需要同步的内容是用户UI的相关操作。所以我们只需要有一个监控机制,可以监控所有的命令,然后进行同步,就可以实现一个简单的在线协同操作。在command命令中可以添加一个anyscLicenser来收集用户操作触发的命令:spread.commandManager().addListener("anyscLicenser",function(){for(vari=0;i{console.log(params,'params');var参数1=参数;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...有兴趣的可以跟着demo下载地址去体验和拓展阅读React+Springboot+Quartz,从0开始自动化Excel报表也可以用作购物车?使用纯前端Excel表格控件SpreadJS简单三步即可构建企业现金流量表