40行代码实现spreadjs在线excel表格多人实时编辑

前赴后继
• 阅读 3356

思路

表格的编辑,即用户对表格的操作,操作表格改变了表格的内容。从代码层面来讲,用户的操作最终都转化成了一个个command,js执行这些command改变了表格内容。因为多个用户的操作就是一个个command的合集,spreadjs提供了anyscLicenser事件来监听用户的操作获取command,用户通过websocket推送拿到别的用户的操作command,执行这些command,那么内容就同步了。

核心代码

因此核心代码如下,可下载文件下来查看效果

        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var spread1 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"));
        var sheet = spread.getActiveSheet();
        var sheet1 = spread1.getActiveSheet();
        var spreadNS = GC.Spread.Sheets;
        var command = {
            canUndo: true,
            execute: function (context, options, isUndo) {
                var Commands = GC.Spread.Sheets.Commands;
                if (isUndo) {
                    Commands.undoTransaction(context, options);
                    return true;
                } else {
                    Commands.startTransaction(context, options);
                    var sheet = context.getSheetFromName(options.sheetName);
                    var cell = sheet.getCell(options.row, options.col);
                    cell.backColor(options.backColor);
                    Commands.endTransaction(context, options);
                    return true;
                }
            }
        };
        var commandManager = spread.commandManager();
        var commandManager1 = spread1.commandManager();
        commandManager.register("changeBackColor", command);
        commandManager1.register("changeBackColor", command);

        /*添加监听*/
        spread.commandManager().addListener("anyscLicenser",function(){
            for(var i=0;i<arguments.length;i++){
                var cmd = arguments[i].command;
                console.log(cmd)
                if(cmd.clipboardText){
                    cmd.fromSheet = null;
                    cmd.fromRanges = null;
                }
                commandManager1.execute(cmd)
            }
        });
        
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
4年前
Java读取word中表格
  因为要新建一个站,公司要把word表格的部分行列存到数据库中。之前用java操作过excel,本来打算用java从word表格中读取数据,再存到数据库中,结果因为权限不够,无法访问公司要写的那个数据库,跪了跪了。  但还是把java读取word中表格的方法写一下,先上代码。publicstaticvoidtestWord(Strin
Stella981 Stella981
4年前
SpreadJS 纯前端表格控件应用案例:Teammark知识管理库
由三节课研发的Teammark系统,基于SpreadJS二次开发实现,采用行业优秀的工作方法,以Excel模板作为基本的文档范例,满足了客户在线编辑Excel文档的刚性需求。下面,让我们一起来看看三节课是如何在“Teammark系统”中应用表格技术,实现多人实时协作与“表格文档协同编辑(https://www.oschina.net/action
Wesley13 Wesley13
4年前
C++ ORM ODB 入门(三)
本节介绍ODB的事务与异常。数据库操作经常涉及到操作多个表格,或者表格中的多行数据。因此必须保证整个过程是原子性的。ODB为数据库的事务提供了易于使用的接口。使用odb::databse的相关方法(persist、update、erase、load)时,必须处于某个事务之间。事务由odb::transcation类表示.odb::tra
Stella981 Stella981
4年前
SpreadJS 应用案例:电力自动化在线数据采集报表系统
电力自动化在线数据采集报表系统,由南京畅洋科技有限公司自主研发。使用该系统,用户只需简单的配置,便可轻松获取想要的数据。该系统通过嵌入SpreadJS纯前端表格控件,可应对电力系统中针对数据处理的各项需求,让数据变得更有价值。下面,让我们一起来看看如何在“电力自动化在线数据采集报表系统”中应用表格技术,实现“数据填报(https://www.osch
Stella981 Stella981
4年前
SpreadJS 纯前端表格控件应用案例:资料填报系统
由达美盛研发的资料填报系统,借助SpreadJS纯前端表格控件提供的API,实现了高度类似Excel的数据资料填报审批界面,用户可在线完成打印归档、组卷存储和分析。下面,让我们一起来看看达美盛是如何在“资料填报系统”中应用表格技术,实现“数据填报(https://www.oschina.net/action/GoToLink?urlhttp
sum墨 sum墨
1年前
《优化接口设计的思路》系列:第十一篇—表格的导入导出接口优化
在后端开发中,我们经常处理增删改查的接口,这些操作已经非常熟悉了。然而,有时产品经理会要求增加一个表格数据的导入和导出功能,让用户可以离线处理数据。这类操作也很常见,但处理起来不太简单。尽管一些前端表格组件可以直接实现这类功能,但往往不够灵活,因为前端的数据通常已经过处理。如果要获取原始数据,还是得依靠后端处理。
taskbuilder taskbuilder
1年前
TaskBuilder_v1.3.46版发布
TaskBuilderv1.3.46版发布,本次更新最关键的内容是可编辑表格组件进行了较大改动,包括整体界面风格更美观,顶部增加了专门的工具栏,提供了丰富的操作按钮,支持按上下左右键切换选中的单元格,还支持弹出数据表格选择数据,可以把选中的数据指定的字段值
秋桐 秋桐
2年前
Java 查找和替换 Excel 数据
Excel电子表格是储存和处理数据的不二选择。当数据内容过多时,我们可以通过一些快捷工具来进行操作。“查找和替换”就是其中之一,比起手动搜索和更新数据,这个功能能帮助我们在大型电子表格中快速获取目标数据,并更改为新数据。Microsoft办公软件已提供了该功能,这里就不再赘述。今天想为大家分享的是如何通过代码来查找和替换数据(以Java代码为例)。使用到的是FreeSpire.XLSforJava组件。
绣鸾 绣鸾
2年前
PDF Reader Pro 3.0 for mac(pdf阅读器)
是一款功能强大的PDF阅读和编辑工具。它支持在PDF文档中进行注释、批注和高亮显示,并可进行文本编辑、插入水印和数字签名等操作。此外,该软件还可以将PDF文档转换为其他格式,如Word、Excel和图片,并提供电子表格功能,可以对表格进行编辑和整理。PDF
为React Ant-Design Table增加字段设置 | 京东云技术团队
最近做的几个项目经常遇到这样的需求,要在表格上增加一个自定义表格字段设置的功能。就是用户可以自己控制那些列需要展示。在几个项目里都实现了一遍,每个项目的需求又都有点儿不一样,迭代了很多版,所以抽时间把这个功能封装了个组件:,将这些差别都集成了进去,方便今后
linbojue linbojue
1年前
java 实现onlyoffice在线编辑
Java实现OnlyOffice在线编辑简介OnlyOffice是一款优秀的在线文档编辑工具,支持文档、表格、演示等多种类型的文件编辑。本文将介绍如何使用Java实现OnlyOffice在线编辑功能,为用户提供更加便捷的文档编辑体验。实现步骤步骤一:搭建后