轉(zhuǎn)帖|使用教程|編輯:莫成敏|2020-05-18 10:13:49.013|閱讀 577 次
概述:SpreadJS 是一款基于 HTML5 的純前端電子表格控件,本文介紹了SpreadJS的使用教程,如何通過監(jiān)聽命令來實(shí)現(xiàn)簡(jiǎn)單的協(xié)同操作。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
SpreadJS 是一款基于 HTML5 的純前端電子表格控件,兼容 450 種以上的 Excel 公式,憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性,備受以華為、招商銀行、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶青睞。在帶來親切的 Excel 使用體驗(yàn)的同時(shí),滿足 Web Excel 組件開發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報(bào)、Excel 類報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景,極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。
本文介紹了通過監(jiān)聽命令來實(shí)現(xiàn)簡(jiǎn)單的協(xié)同操作的內(nèi)容!
新冠病毒的疫情使得在線辦公成為了一個(gè)常態(tài),這使得在線文檔成為了時(shí)下的熱點(diǎn)。其中在線協(xié)同表格是在線文檔的重要一個(gè)組成部分,SpreadJS在在線協(xié)同表格上有著得天獨(dú)厚的優(yōu)勢(shì):SpreadJS本身已經(jīng)實(shí)現(xiàn)了單人操作在線文檔的基本功能。并且身為控件,用戶只需引入就可以在項(xiàng)目工程中為特性的業(yè)務(wù)賦予在線表格的能力。這樣開發(fā)者在使用SpreadJS后,只需要在其基礎(chǔ)上自行實(shí)現(xiàn)對(duì)應(yīng)的協(xié)同功能,就可以將本身的單人操作變?yōu)閰f(xié)同操作。
誠(chéng)然SpreadJS雖然本身不具備協(xié)同的支持,但是利用好SpreadJS本身的命令機(jī)制可以對(duì)實(shí)現(xiàn)協(xié)同的操作上有很大的幫助。
何為命令機(jī)制:
命令就是將一步或多步的操作封裝成一個(gè)可以執(zhí)行的命令,執(zhí)行這樣的命令并傳入對(duì)應(yīng)的參數(shù),就可以執(zhí)行相關(guān)的一連串操作。并且操作的對(duì)象或范圍均可以通過參數(shù)的調(diào)整來指定。命令的相關(guān)方法調(diào)用參考后面的API:!
命令究竟有什么實(shí)際的意義呢?
首先,SpreadJS默認(rèn)會(huì)將所有的用戶UI操作封裝成命令去執(zhí)行(內(nèi)置命令),而我們通常的代碼設(shè)置并沒有通過命令來執(zhí)行。這樣就可以用來區(qū)分一個(gè)操作到底是用戶UI操作(最終用戶使用時(shí)的操作),還是代碼邏輯進(jìn)行的操作(程序員通過寫代碼完成,即程序內(nèi)部的運(yùn)行邏輯)。
其次,命令本身可以設(shè)置是否可以被撤銷(undo),結(jié)合上一條就可以做到將用戶的操作進(jìn)行撤銷,但是程序執(zhí)行的代碼操作不會(huì)被進(jìn)行撤銷的操作。在實(shí)際應(yīng)用中有很重要的價(jià)值,舉個(gè)例子:
SpreadJS默認(rèn)初始化的電子表格是一個(gè)空表格,我們經(jīng)常遇到打開頁(yè)面后需要加載一個(gè)有數(shù)據(jù)的表格這樣的場(chǎng)景,我們往往會(huì)將表格初始化的操作通過代碼在js中運(yùn)行來實(shí)現(xiàn)這樣的效果。當(dāng)我們加載好表格之后,在頁(yè)面上按ctrl+z進(jìn)行撤銷,會(huì)發(fā)現(xiàn)設(shè)置的表格不會(huì)被撤銷。這就是因?yàn)槌绦驁?zhí)行的代碼操作不是命令所以不會(huì)被撤銷的結(jié)果。而用戶在表格上修改的任何操作均可以被撤銷,撤銷的同時(shí)不會(huì)影響之前代碼設(shè)置這部分的內(nèi)容。
命令對(duì)于在線協(xié)同的應(yīng)用:
命令的機(jī)制我們可以分清操作到底是代碼執(zhí)行的還是用戶UI去操作的,而在線協(xié)同的場(chǎng)景中需要同步的內(nèi)容就是用戶UI的相關(guān)操作。所以我們只需要有一個(gè)監(jiān)聽的機(jī)制,能監(jiān)聽到所有的命令,然后按照順序進(jìn)行同步,就可以做到一個(gè)簡(jiǎn)單的在線協(xié)同操作了。
而在命令command中是可以添加一個(gè)anyscLicenser用于收集用戶操作觸發(fā)的命令的:
spread.commandManager().addListener("anyscLicenser",function(){ for(var i=0;i<arguments.length;i++){ var cmd = arguments[i].command; console.log(cmd); } });
通過這樣的監(jiān)聽,我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的多人同步的效果。而命令本身是可以自定義的,我們可以將提供給用戶操作的接口(input,按鈕,下拉等)的實(shí)現(xiàn)邏輯封裝成一個(gè)個(gè)自定義命令,就像附件的demo這樣。這樣就可以做到通過命令來收集用戶在表格上的操作,來完成一個(gè)簡(jiǎn)單的協(xié)同。
這里要注意的是,SpreadJS雖然有命令這樣的機(jī)制,但其初衷并不是為了協(xié)同而設(shè)置的,所以有些情況下源生的命令并不能完全的符合協(xié)同的實(shí)現(xiàn),需要根據(jù)實(shí)際情況自己進(jìn)行改造來滿足。提供的demo以及命令實(shí)現(xiàn)的方式可當(dāng)做思路可供參考。
相關(guān)內(nèi)容推薦:
想要購(gòu)買SpreadJS正版授權(quán),或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: