初始化表格时,可以设置一个对象配置串options
来自定义配置Luckysheet表格。
如下是一个简洁的配置案例:
// 配置项
const options = {
container: 'luckysheet', // 设定DOM容器的id
title: 'Luckysheet Demo', // 设定表格名称
lang: 'zh' // 设定表格语言
// 更多其他设置...
}
// 初始化表格
luckysheet.create(options)
这里的options
配置项会作用于整个表格,特别的,单个sheet的配置则需要在options.data
数组中,分别设置对应更详细的参数,参考工作表配置
针对个性化的需求,除了允许配置信息栏(showinfobar)、工具栏(showtoolbar)、底部sheet页(showsheetbar)、底部计数栏(showstatisticBar)之外, Luckysheet开放了更细致的自定义配置选项,分别有
以下为所有支持的设置参数
作用:配置loadUrl
接口地址,加载所有工作表的配置,并包含当前页单元格数据,与loadSheetUrl
配合使用。参数为gridKey
(表格主键)。
源码的请求写法是:
$.post(loadurl, {"gridKey" : server.gridKey}, function (d) {})
参见源码
src/core.js
Luckysheet会通过ajax请求(POST)整个表格的数据,默认载入status为1的sheet数据中的celldata
,其余的sheet载入除celldata
字段外的所有配置字段。特别是在数据量大的时候,loadUrl
只负责当前页单元格数据,配置loadSheetUrl
作为其它工作表异步加载单元格数据的接口,可以提高性能。
一个合格的接口返回的json字符串数据为:
"[
//status为1的sheet页,重点是需要提供初始化的数据celldata
{
"name": "Cell",
"index": "sheet_01",
"order": 0,
"status": 1,
"celldata": [{"r":0,"c":0,"v":{"v":1,"m":"1","ct":{"fa":"General","t":"n"}}}]
},
//其他status为0的sheet页,无需提供celldata,只需要配置项即可
{
"name": "Data",
"index": "sheet_02",
"order": 1,
"status": 0
},
{
"name": "Picture",
"index": "sheet_03",
"order": 2,
"status": 0
}
]"
有几个注意点
loadSheetUrl
配置的接口地址请求数据,把引用到的sheet的数据一并补全,而不用等切换到其它页的时候再请求作用:配置loadSheetUrl
接口地址,用于异步加载其它单元格数据。参数为gridKey
(表格主键) 和 index
(sheet主键合集,格式为["sheet_01","sheet_02","sheet_03"]
)。
源码的请求写法是:
$.post(loadSheetUrl, {"gridKey" : server.gridKey, "index": sheetindex.join(",")}, function (d) {})
返回的数据为sheet的celldata
字段数据集合。
一个合格的接口返回的json字符串数据为:
"{
"sheet_01": [
{
"r": 0,
"c": 0,
"v": { "v": 1, "m": "1", "ct": { "fa": "General", "t": "n" } }
}
],
"sheet_02": [
{
"r": 0,
"c": 0,
"v": { "v": 1, "m": "1", "ct": { "fa": "General", "t": "n" } }
}
],
"sheet_03": [
{
"r": 0,
"c": 0,
"v": { "v": 1, "m": "1", "ct": { "fa": "General", "t": "n" } }
}
]
}"
同loadUrl
类似,loadSheetUrl
也要注意这几点:
loadUrl
加载的当前页数据时发现当前工作表引用了其他工作表,二是切换到一个未曾加载过数据的工作表时updateUrl
配合使用。如果要开启共享编辑,此参数必须设置为true
。作用:操作表格后,实时保存数据的websocket地址,此接口也是共享编辑的接口地址。
有个注意点,要想开启共享编辑,必须满足以下3个条件:
allowUpdate
为true
loadUrl
updateUrl
注意,发送给后端的数据默认是经过pako压缩过后的。后台拿到数据需要先解压。
通过共享编辑功能,可以实现Luckysheet实时保存数据和多人同步数据,每一次操作都会发送不同的参数到后台,具体的操作类型和参数参见表格操作
loadUrl
和loadSheetUrl
的时候,需要手动配置传入整个客户端所有sheet数据[shee1, sheet2, sheet3]
,详细参数设置参见工作表配置showtoolbarConfig
拥有更高的优先级。格式:
{
undoRedo: false, //撤销重做,注意撤消重做是两个按钮,由这一个配置决定显示还是隐藏
paintFormat: false, //格式刷
currencyFormat: false, //货币格式
percentageFormat: false, //百分比格式
numberDecrease: false, // '减少小数位数'
numberIncrease: false, // '增加小数位数
moreFormats: false, // '更多格式'
font: false, // '字体'
fontSize: false, // '字号大小'
bold: false, // '粗体 (Ctrl+B)'
italic: false, // '斜体 (Ctrl+I)'
strikethrough: false, // '删除线 (Alt+Shift+5)'
underline: false, // '下划线 (Alt+Shift+6)'
textColor: false, // '文本颜色'
fillColor: false, // '单元格颜色'
border: false, // '边框'
mergeCell: false, // '合并单元格'
horizontalAlignMode: false, // '水平对齐方式'
verticalAlignMode: false, // '垂直对齐方式'
textWrapMode: false, // '换行方式'
textRotateMode: false, // '文本旋转方式'
image:false, // '插入图片'
link:false, // '插入链接'
chart: false, // '图表'(图标隐藏,但是如果配置了chart插件,右击仍然可以新建图表)
postil: false, //'批注'
pivotTable: false, //'数据透视表'
function: false, // '公式'
frozenMode: false, // '冻结方式'
sortAndFilter: false, // '排序和筛选'
conditionalFormat: false, // '条件格式'
dataVerification: false, // '数据验证'
splitColumn: false, // '分列'
screenshot: false, // '截图'
findAndReplace: false, // '查找替换'
protection:false, // '工作表保护'
print:false, // '打印'
}
示例:
仅显示撤消重做和字体按钮:
//options
{
showtoolbar: false,
showtoolbarConfig:{
undoRedo: true,
font: true,
}
}
仅隐藏图片和打印按钮:
//options
{
showtoolbar: true, // 默认就是true,可以不设置
showtoolbarConfig:{
image: false,
print: false,
}
}
showsheetbarConfig
拥有更高的优先级。格式:
{
add: false, //新增sheet
menu: false, //sheet管理菜单
sheet: false //sheet页显示
}
示例:
仅显示新增sheet按钮:
//options
{
showsheetbar: false,
showsheetbarConfig:{
add: true,
}
}
仅隐藏新增sheet和管理按钮:
//options
{
showsheetbar: true, // 默认就是true,可以不设置
showsheetbarConfig:{
add: false,
menu: false,
}
}
showstatisticBarConfig
拥有更高的优先级。格式:
{
count: false, // 计数栏
view: false, // 打印视图
zoom: false, // 缩放
}
示例:
仅显示缩放按钮:
//options
{
showstatisticBar: false,
showstatisticBarConfig:{
zoom: true,
}
}
仅隐藏打印视图按钮:
//options
{
showstatisticBar: true, // 默认就是true,可以不设置
showstatisticBarConfig:{
view: false,
}
}
作用:右上角的用户信息展示样式,支持以下三种形式
HTML模板字符串,如:
options:{
// 其他配置
userInfo:'<i style="font-size:16px;color:#ff6a00;" class="fa fa-taxi" aria-hidden="true"></i> Lucky',
}
或者一个普通字符串,如:
options:{
// 其他配置
userInfo:'Lucky',
}
false
:不展示
options:{
// 其他配置
userInfo:false, // 不展示用户信息
}
ture
:展示默认的字符串
options:{
// 其他配置
userInfo:true, // 展示HTML:'<i style="font-size:16px;color:#ff6a00;" class="fa fa-taxi" aria-hidden="true"></i> Lucky'
}
对象格式,设置 userImage
:用户头像地址 和 userName
:用户名,如:
options:{
// 其他配置
userImage:'https://cdn.jsdelivr.net/npm/luckyresources@1.0.3/assets/img/logo/logo.png', // 头像url
userName:'Lucky', // 用户名
}
注意,设置为undefined
或者不设置,同设置false
[{url:"www.baidu.com", "icon":'<i class="fa fa-folder" aria-hidden="true"></i>', "name":"我的表格"}, {url:"www.baidu.com", "icon":'<i class="fa fa-sign-out" aria-hidden="true"></i>', "name":"退出登陆"}]
'<button id="" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">下载</button> <button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">分享</button> <button id="luckysheet-share-btn-title" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">秀数据</button>'
作用:强制刷新公式。
默认情况下,为提高加载性能,表格初始化的时候,含有公式的单元格会默认直接取得v
和m
作为数据结果,而不做实时计算。
如果公式关联到的单元格数据已经变化,或者公式所在的单元格数据结果改变了,则会导致关联单元格应该计算得出的结果和实际显示结果不一致,这是就需要开启公式刷新,保证数据实时计算的准确性。
⚠️提醒,公式较多时会有性能问题,慎用!
格式:
{
copy: false, // 复制
copyAs: false, // 复制为
paste: false, // 粘贴
insertRow: false, // 插入行
insertColumn: false, // 插入列
deleteRow: false, // 删除选中行
deleteColumn: false, // 删除选中列
deleteCell: false, // 删除单元格
hideRow: false, // 隐藏选中行和显示选中行
hideColumn: false, // 隐藏选中列和显示选中列
rowHeight: false, // 行高
columnWidth: false, // 列宽
clear: false, // 清除内容
matrix: false, // 矩阵操作选区
sort: false, // 排序选区
filter: false, // 筛选选区
chart: false, // 图表生成
image: false, // 插入图片
link: false, // 插入链接
data: false, // 数据验证
cellFormat: false // 设置单元格格式
}
除了单元格,这里的配置还包括行标题右击菜单、列标题右击菜单和列标题下拉箭头的菜单,具体配置关系如下表格:
右击菜单配置 | 单元格 | 行标题 | 列标题 | 列箭头 |
---|---|---|---|---|
copy | 复制 | 复制 | 复制 | 复制 |
copyAs | 复制为 | 复制为 | 复制为 | 复制为 |
paste | 粘贴 | 粘贴 | 粘贴 | 粘贴 |
insertRow | 插入行 | 向上增加N行,向下增加N行 | - | - |
insertColumn | 插入列 | - | 向左增加N列,向右增加N列 | 向左增加N列,向右增加N列 |
deleteRow | 删除选中行 | 删除选中行 | - | - |
deleteColumn | 删除选中列 | - | 删除选中列 | 删除选中列 |
deleteCell | 删除单元格 | - | - | - |
hideRow | - | 隐藏选中行和显示选中行 | - | - |
hideColumn | - | - | 隐藏选中列和显示选中列 | 隐藏选中列和显示选中列 |
rowHeight | - | 行高 | - | - |
columnWidth | - | - | 列宽 | 列宽 |
clear | 清除内容 | 清除内容 | 清除内容 | - |
matrix | 矩阵操作选区 | 矩阵操作选区 | 矩阵操作选区 | - |
sort | 排序选区 | 排序选区 | 排序选区 | A-Z排序和Z-A排序 |
filter | 筛选选区 | 筛选选区 | 筛选选区 | - |
chart | 图表生成 | 图表生成 | 图表生成 | - |
image | 插入图片 | 插入图片 | 插入图片 | - |
link | 插入链接 | 插入链接 | 插入链接 | - |
data | 数据验证 | 数据验证 | 数据验证 | - |
cellFormat | 设置单元格格式 | 设置单元格格式 | 设置单元格格式 | - |
格式:
{
delete: false, // 删除
copy: false, // 复制
rename: false, //重命名
color: false, //更改颜色
hide: false, //隐藏,取消隐藏
move: false, //向左移,向右移
}
------------
### rowHeaderWidth
- 类型:Number
- 默认值:46
- 作用:行标题区域的宽度,如果设置为0,则表示隐藏行标题
------------
### columnHeaderHeight
- 类型:Number
- 默认值:20
- 作用:列标题区域的高度,如果设置为0,则表示隐藏列标题
------------
### sheetFormulaBar
- 类型:Boolean
- 默认值:true
- 作用:是否显示公式栏
------------
### defaultFontSize
- 类型:Number
- 默认值:11
- 作用:初始化默认字体大小
------------
### limitSheetNameLength
- 类型:Boolean
- 默认值:true
- 作用:工作表重命名等场景下是否限制工作表名称的长度
------------
### defaultSheetNameMaxLength
- 类型:Number
- 默认值:31
- 作用:默认允许的工作表名最大长度
------------
### pager
- 类型:Object
- 默认值:null
- 作用:分页器按钮设置,初版方案是直接使用的jquery插件 [sPage](https://github.com/jvbei/sPage)
点击分页按钮会触发钩子函数 `onTogglePager`,返回当前页码,同`sPage`的`backFun`方法,此分页器设置只负责UI部分,具体切换分页后的数据请求和数据渲染,请在`onTogglePager`钩子行数里自定义处理。
js pager: {
pageIndex: 1, //当前的页码
pageSize: 10, //每页显示多少行数据
total: 50, //数据总行数
selectOption: [10, 20] //允许设置每页行数的选项
}
------------
## 钩子函数
钩子函数应用于二次开发时,会在各个常用鼠标或者键盘操作时植入钩子,调用开发者传入的函数,起到扩展Luckysheet功能的作用。
钩子函数统一配置在`options.hook`下,可以分别针对单元格、sheet页、表格创建配置hook。
> 使用案例可参考源码 [src/index.html](https://github.com/mengshukeji/Luckysheet/blob/master/src/index.html)
## 单元格
### cellEditBefore
- 类型:Function
- 默认值:null
- 作用:进入单元格编辑模式之前触发。在选中了某个单元格且在非编辑状态下,通常有以下三种常规方法触发进入编辑模式
- 双击单元格
- 敲Enter键
- 使用API:enterEditMode
- 参数:
- {Array} [range]: 当前选区范围
------------
### cellUpdateBefore
- 类型:Function
- 默认值:null
- 作用:更新这个单元格值之前触发,`return false` 则不执行后续的更新。在编辑状态下修改了单元格之后,退出编辑模式并进行数据更新之前触发这个钩子。
- 参数:
- {Number} [r]: 单元格所在行数
- {Number} [c]: 单元格所在列数
- {Object | String | Number} [value]: 要修改的单元格内容
- {Boolean} [isRefresh]: 是否刷新整个表格
------------
### cellUpdated
- 类型:Function
- 默认值:null
- 作用:更新这个单元格后触发
- 参数:
- {Number} [r]: 单元格所在行数
- {Number} [c]: 单元格所在列数
- {Object} [oldValue]: 修改前的单元格对象
- {Object} [newValue]: 修改后的单元格对象
- {Boolean} [isRefresh]: 是否刷新整个表格
------------
### cellRenderBefore
- 类型:Function
- 默认值:null
- 作用:单元格渲染前触发,`return false` 则不渲染该单元格
- 参数:
- {Object} [cell]:单元格对象
- {Object} [position]:
+ {Number} [r]:单元格所在行号
+ {Number} [c]:单元格所在列号
+ {Number} [start_r]:单元格左上角的水平坐标
+ {Number} [start_c]:单元格左上角的垂直坐标
+ {Number} [end_r]:单元格右下角的水平坐标
+ {Number} [end_c]:单元格右下角的垂直坐标
- {Object} [sheet]:当前sheet对象
- {Object} [ctx]: 当前画布的context
------------
### cellRenderAfter
- 类型:Function
- 默认值:null
- 作用:单元格渲染结束后触发,`return false` 则不渲染该单元格
- 参数:
- {Object} [cell]:单元格对象
- {Object} [position]:
+ {Number} [r]:单元格所在行号
+ {Number} [c]:单元格所在列号
+ {Number} [start_r]:单元格左上角的水平坐标
+ {Number} [start_c]:单元格左上角的垂直坐标
+ {Number} [end_r]:单元格右下角的水平坐标
+ {Number} [end_c]:单元格右下角的垂直坐标
- {Object} [sheet]:当前sheet对象
- {Object} [ctx]: 当前画布的context
- 示例:
一个在D1单元格的左上角和右下角分别绘制两张图的案例
:::::: details
js luckysheet.create({
hook: {
cellRenderAfter: function (cell, position, sheetFile, ctx) {
var r = position.r;
var c = position.c;
if (r === 0 && c === 3) { // 指定处理D1单元格
if (!window.storeUserImage) {
window.storeUserImage = {}
}
if (!window.storeUserImage[r + '_' + c]) {
window.storeUserImage[r + '_' + c] = {}
}
var img = null;
var imgRight = null;
if (window.storeUserImage[r + '_' + c].image && window.storeUserImage[r + '_' + c].imgRight) {
// 加载过直接取
img = window.storeUserImage[r + '_' + c].image;
imgRight = window.storeUserImage[r + '_' + c].imgRight;
} else {
img = new Image();
imgRight = new Image();
img.src = 'https://www.dogedoge.com/favicon/developer.mozilla.org.ico';
imgRight.src = 'https://www.dogedoge.com/static/icons/twemoji/svg/1f637.svg';
// 图片缓存到内存,下次直接取,不用再重新加载
window.storeUserImage[r + '_' + c].image = img;
window.storeUserImage[r + '_' + c].imgRight = imgRight;
}
if (img.complete) { // 已经加载完成的直接渲染
ctx.drawImage(img, position.start_c, position.start_r, 10, 10);
} else {
img.onload = function () {
ctx.drawImage(img, position.start_c, position.start_r, 10, 10);
}
}
if (imgRight.complete) {
ctx.drawImage(imgRight, position.end_c - 10, position.end_r - 10, 10, 10);
} else {
imgRight.onload = function () {
ctx.drawImage(imgRight, position.end_c - 10, position.end_r - 10, 10, 10);
}
}
}
}
}
})
``` :::
luckysheetDrawMain
渲染表格之前。return false
则不渲染行标题return false
则不渲染行标题return false
则不渲染列标题return false
则不渲染列标题return false
则终止之后的点击操作return false
则终止之后的点击操作(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
index
order
(TODO)
index
order
order
(TODO)
(TODO)
(TODO)
index
(TODO)
(TODO)
index
(TODO)
index
(TODO)
index
(TODO)
index
index
(TODO)
index
(TODO)
index
beforeCreateDom
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
return false
则不插入批注{ r:0,c:2,v:{m:'233',v:'233'}}
,包含批注信息
return false
则不删除批注{ r:0,c:2,v:{m:'233',v:'233'}}
,可以看到批注信息{ r:0,c:2,v:{m:'233',v:'233'}}
,可以看到批注已被删除
return false
则不修改批注{ r:0,c:2,v:{m:'233',v:'233'}}
{ r:0,c:2,v:{m:'233',v:'233'}}
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
(TODO)
options.fireMousedown