找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

200

主题

9899

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
15531

讲师达人悬赏达人微信认证勋章SpreadJS 认证SpreadJS 高级认证元老葡萄

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-4-27 09:22  /   查看:4835  /  回复:4
       新冠病毒的疫情使得在线办公成为了一个常态,这使得在线文档成为了时下的热点。其中在线协同表格是在线文档的重要一个组成部分,SpreadJS在在线协同表格上有着得天独厚的优势:SpreadJS本身已经实现了单人操作在线文档的基本功能。并且身为控件,用户只需引入就可以在项目工程中为特性的业务赋予在线表格的能力。这样开发者在使用SpreadJS后,只需要在其基础上自行实现对应的协同功能,就可以将本身的单人操作变为协同操作。       诚然SpreadJS虽然本身不具备协同的支持,但是利用好SpreadJS本身的命令机制可以对实现协同的操作上有很大的帮助。
       何为命令机制:
              命令就是将一步或多步的操作封装成一个可以执行的命令,执行这样的命令并传入对应的参数,就可以执行相关的一连串操作。并且操作的对象或范围均可以通过参数的调整来指定。命令的相关方法调用参考下面的API:
              https://demo.grapecity.com.cn/spreadjs/help/latest/content/SpreadJS~GC.Spread.Commands.CommandManager.html
              命令究竟有什么实际的意义呢?
              首先,SpreadJS默认会将所有的用户UI操作封装成命令去执行(内置命令),而我们通常的代码设置并没有通过命令来执行。这样就可以用来区分一个操作到底是用户UI操作(最终用户使用时的操作),还是代码逻辑进行的操作(程序员通过写代码完成,即程序内部的运行逻辑)。
              其次,命令本身可以设置是否可以被撤销(undo),结合上一条就可以做到将用户的操作进行撤销,但是程序执行的代码操作不会被进行撤销的操作。在实际应用中有很重要的价值,举个例子:
              SpreadJS默认初始化的电子表格是一个空表格,我们经常遇到打开页面后需要加载一个有数据的表格这样的场景,我们往往会将表格初始化的操作通过代码在js中运行来实现这样的效果。当我们加载好表格之后,在页面上按ctrl+z进行撤销,会发现设置的表格不会被撤销。这就是因为程序执行的代码操作不是命令所以不会被撤销的结果。而用户在表格上修改的任何操作均可以被撤销,撤销的同时不会影响之前代码设置这部分的内容。
       命令对于在线协同的应用:
              命令的机制我们可以分清操作到底是代码执行的还是用户UI去操作的,而在线协同的场景中需要同步的内容就是用户UI的相关操作。所以我们只需要有一个监听的机制,能监听到所有的命令,然后按照顺序进行同步,就可以做到一个简单的在线协同操作了。
              而在命令command中是可以添加一个anyscLicenser用于收集用户操作触发的命令的:
  1. spread.commandManager().addListener("anyscLicenser",function(){
  2.     for(var i=0;i<arguments.length;i++){
  3.         var cmd = arguments[i].command;
  4.         console.log(cmd);
  5.     }
  6.                 });
复制代码
             通过这样的监听,我们就可以实现一个简单的多人同步的效果。而命令本身是可以自定义的,我们可以将提供给用户操作的接口(input,按钮,下拉等)的实现逻辑封装成一个个自定义命令,就像附件的demo这样。这样就可以做到通过命令来收集用户在表格上的操作,来完成一个简单的协同。              这里要注意的是,SpreadJS虽然有命令这样的机制,但其初衷并不是为了协同而设置的,所以有些情况下源生的命令并不能完全的符合协同的实现,需要根据实际情况自己进行改造来满足。提供的demo以及命令实现的方式可当做思路可供参考。
              






同步.html

2.66 KB, 下载次数: 383

4 个回复

倒序浏览
leeseean
注册会员   /  发表于:2020-5-6 16:38:07
沙发
官方文档没有写 anyscLicenser 这个事件,找不到
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-5-6 17:50:23
板凳
这个是内部事件,该接口尚未public,文档上没有写的
回复 使用道具 举报
markgogo
注册会员   /  发表于:2020-6-11 10:43:54
地板
spread.commandManager().addListener("anyscLicenser",function(){
    for(var i=0;i<arguments.length;i++){
        var cmd = arguments[i].command;
        console.log(cmd);
    }
                });

如果拿到cmd这个对象

另外那个客户端,可以直接调用
        var commandManager = spread.commandManager();

commandManager.execute(cmd );

来同步操作吗? 求实例
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-6-16 11:02:32
5#
markgogo 发表于 2020-6-11 10:43
spread.commandManager().addListener("anyscLicenser",function(){
    for(var i=0;i

见帖子附件
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部