luckysheet 只读模式和编辑模式

只读模式配置：

var options = {container: "luckysheet", //容器的IDtitle: "bi", // 工作簿名称lang: "zh", // 设定表格语言 国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")allowCopy: false, // 是否允许拷贝showtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏showsheetbar: false, // 是否显示底部sheet页按钮showstatisticBar: false, // 是否显示底部计数栏sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 允许增加行enableAddCol: false, // 允许增加列userInfo: false, // 右上角的用户信息展示样式showRowBar: false, // 是否显示行号区域showColumnBar: false, // 是否显示列号区域sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false,//返回头部按钮rowHeaderWidth: 0,//纵坐标columnHeaderHeight: 0,//横坐标showstatisticBarConfig: {count:false,view:false,zoom:false,},showsheetbarConfig: {add: false, //新增sheetmenu: false, //sheet管理菜单sheet: false, //sheet页显示},hook: {cellMousedown:this.cellMousedown,//绑定鼠标事件},forceCalculation: true,//强制计算公式data: sheetData
};

编辑模式：

container: 'luckysheet', //luckysheet为容器id
lang:'zh',
showGridLines:true,
allowEdit:true,
showinfobar: false, // 是否显示顶部信息栏
showsheetbar: false, // 是否显示底部sheet页按钮
showstatisticBar: false, // 是否显示底部计数栏
sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
userInfo: false, // 右上角的用户信息展示样式
plugins: ['chart'],
showstatisticBarConfig: {count:false,view:false,zoom:false,
},
showsheetbarConfig: {add: false, //新增sheetmenu: false, //sheet管理菜单sheet: false, //sheet页显示
},
hook: {cellMousedown:this.cellMousedown,
}

编辑模式下格式数据保存到服务端，到只读模式下展示时需要数据转换：

let sheetfile = luckysheet.getLuckysheetfile();
sheetfile[0].celldata = luckysheet.transToCellData(sheetfile[0].data);

由于是集成到vue keep-alive 的router-view下每个路由下的页面都显示一个luckysheet 只读界面，但是luckysheet集成到项目中是全局的（只有一个）,所有在切换路径时需要切换显示luckysheet的index

目前采用的是修改扩展luckysheet 每次切换路由都重新设置显示内容setStore 和绑定鼠标单击事件

//重新绑定事件luckysheet$1.setHook = function(hook){luckysheetConfigsetting.hook = hook;}//重新设置文档设置和数据luckysheet$1.setStore = function(Store_out){Store = Store_out;}//获取设置文档设置和数据luckysheet$1.getStore = function(){return Store;}

luckysheet 只读模式和编辑模式相关推荐

详解Linux系统Vi 和 Vim中正常模式、编辑模式、命令模式相互转化，以及vim命令使用
详解Linux系统Vi 和 Vim中正常模式.编辑模式.命令模式相互转化 vi 和 vim 的基本介绍 vi 和 vim 的三种常见模式正常模式正常模式常用命令插入模式/编辑模式命令行模式 v ...
微信公众号开发（一）--开发模式与编辑模式
学习步骤:分四章来讲述这部分内容,下面是每章的大致内容. 1.了解开发模式与编辑模式,开发前的一些准备. 2.开发模式用户.微信服务器.个人服务器是如何交互的.什么是接口. 3.各种接口功能的调用与实 ...
vim三种工作模式命令模式、编辑模式、末行（底行）模式
命令模式: 进入vim的默认模式,可以浏览文件,通过移动光标进行一些操作 1.光标移动到行首按键:shift+6 ("^"符号) 光标移动到行尾按键:shift+4(&quo ...
linux vi回到末行模式,Linux vi/vim 的命令模式,，编辑模式，末行模式
命令模式:可以随意的打开一个文件.比如操作 1.[root@room9pc16 ~]# vim /tmp/passwd 按下enter健将会出现如下信息: root:x:0:0:root:/root: ...
linux文本编辑器由命令模式进入编辑模式操作
打开一个文件后,如果当前是命令模式,可以按下[i,I,o,O,a,A,r,R]等字母之后进入编辑模式,按下上述的字母时,画面的左下方可能会出现[--INSERT--或--插入--]的字样,可以做文字数 ...
Jupyter快捷键总结（命令模式与编辑模式）
文章目录命令模式 (按键 Esc 开启)快捷键编辑模式 ( Enter 键启动)下快捷键 Jupyter Notebook 有两种键盘输入模式.编辑模式,允许你往单元中键入代码或文本:这时的单元框 ...
Linux vim命令模式、末行模式、编辑模式相互切换
【微信开发】微信公众号开发之编辑模式使用
. 作者 : 万境绝尘转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/20306735 . . 本人微信公众账号(订阅号) : ...
linux 编辑模式使用sed,sed命令的用法和vim编辑器的使用
一.文本处理工具sed sed [option]-.'script] [input-file]- 简介: sed是一种流编辑器,他一次处理一行的内容,处理时把当前处理的行存储在临时缓冲区中,这个缓冲区 ...

luckysheet 只读模式和编辑模式

luckysheet 只读模式和编辑模式相关推荐

最新文章

热门文章