初始化表格时,可以设置一个对象配置串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
拥有更高的优先级。json
{
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, // '打印'
}
示例1:
仅显示撤消重做和字体按钮:
//options
{
showtoolbar: false,
showtoolbarConfig:{
undoRedo: true,
font: true,
}
}
仅隐藏图片和打印按钮:
//options
{
showtoolbar: true, // 默认就是true,可以不设置
showtoolbarConfig:{
image: false,
print: false,
}
}
格式2: 对象格式可以很方便控制显示隐藏,使用数组形式可轻松控制按钮顺序和位置, 以下为工具栏按钮和分隔符的默认配置。
[
"undo", "redo", "paintFormat", "|",
"currencyFormat", "percentageFormat", "numberDecrease", "numberIncrease", "moreFormats", "|",
"font", "|",
"fontSize", "|",
"bold", "italic", "strikethrough", "underline", "textColor", "|",
"fillColor", "border", "mergeCell", "|",
"horizontalAlignMode", "verticalAlignMode", "textWrapMode", "textRotateMode", "|",
"image", "link", "chart", "postil", "pivotTable", "|",
"function", "frozenMode", "sortAndFilter", "conditionalFormat", "dataVerification", "splitColumn", "screenshot", "findAndReplace", "protection", "print"
]
示例2:
自定义按钮和位置, 保护放到最前面, 只要字体样式相关按钮。
{
"showtoolbarConfig": [
"protection", "|",
"font", "|",
"fontSize", "|",
"bold", "italic", "strikethrough", "underline", "textColor"
]
}
类型:Boolean
默认值:true
作用:是否显示顶部信息栏
showsheetbarConfig
拥有更高的优先级。json
{
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
拥有更高的优先级。json
{
count: false, // 计数栏
view: false, // 打印视图
zoom: false, // 缩放
}
示例:
仅显示缩放按钮:
//options
{
showstatisticBar: false,
showstatisticBarConfig:{
zoom: true,
}
}
仅隐藏打印视图按钮:
//options
{
showstatisticBar: true, // 默认就是true,可以不设置
showstatisticBarConfig:{
view: false,
}
}
作用:右上角的用户信息展示样式,支持以下三种形式
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 | 设置单元格格式 | 设置单元格格式 | 设置单元格格式 | - |
onTogglePager
,返回当前页码,同sPage
的backFun
方法,此分页器设置只负责UI部分,具体切换分页后的数据请求和数据渲染,请在onTogglePager
钩子行数里自定义处理。
js
pager: {
pageIndex: 1, //当前页码,必填
total: 100, //数据总条数,必填
selectOption: [10, 20, 30], // 选择每页的行数,
pageSize: 10, //每页显示多少条数据,默认10条
showTotal: false, // 是否显示总数,默认关闭:false
showSkip: false, //是否显示跳页,默认关闭:false
showPN: false, //是否显示上下翻页,默认开启:true
prevPage: '', //上翻页文字描述,默认"上一页"
nextPage: '', //下翻页文字描述,默认"下一页"
totalTxt: '', // 数据总条数文字描述,默认"总共:{total}"
}
用于自定义图片的上传,默认情况下,插入的图片是以base64的形式放入sheet数据中,如果需要单独上传图片,仅在sheet中引用图片地址可使用此配置。
function (file) => Promise(imgUrl)
,接受file对象,返回Promise,值为上传完成的图片urlundefined
:::details 查看示例配置
{
uploadImage: function (file) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://192.168.210.159/miniuiServer/imageUploader.php');
// 额外的请求头
var headers = {};
if (headers) {
Object.keys(headers).forEach(function (k) {
xhr.setRequestHeader(k, headers[k]);
});
}
var data = new FormData();
// 要上传的图片文件
data.append('file', file, file.name || '');
xhr.send(data);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
var url = res.downloadUrl;
if (url) {
resolve(url); // 给上传的后的地址
} else {
reject('image upload error');
}
} else {
reject('image upload error');
}
}
};
});
}
}
:::
图片上传的路径处理函数,和 uploadImage 相关,一般只有使用自定义图片上传才需要此配置。
function (string) => string
,接受原始路径,返回新路径undefined
rest/attach/[fileguid]
, 则需要处理为 http://localhost:8080/xxx/rest/attach/[fileguid]
才能显示,但将前面域名信息写入数据,后续使用可能会有问题,因此可使用此方法处理路径,全路径仅在展示使用,数据内仅存储 rest/attach/[fileguid]
{
// 处理上传图片的地址
imageUrlHandle: function (url) {
// 已经是 // http data 开头则不处理
if (/^(?:\/\/|(?:http|https|data):)/i.test(url)) {
return url;
}
return location.origin + url;
}
}
钩子函数应用于二次开发时,会在各个常用鼠标或者键盘操作时植入钩子,调用开发者传入的函数,起到扩展Luckysheet功能的作用。
钩子函数统一配置在options.hook
下,可以分别针对单元格、sheet页、表格创建配置hook。
使用案例可参考源码 src/index.html
作用:进入单元格编辑模式之前触发。在选中了某个单元格且在非编辑状态下,通常有以下三种常规方法触发进入编辑模式
参数:
return false
则不执行后续的更新。在编辑状态下修改了单元格之后,退出编辑模式并进行数据更新之前触发这个钩子。return false
则不渲染该单元格return false
则不渲染该单元格参数:
示例:
一个在D1单元格的左上角和右下角分别绘制两张图的案例 :::::: details
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)
参数:
类型:Function
默认值:null
作用:拷贝创建sheet页后触发,sheet页新建也包含数据透视表新建
参数:
(TODO)
index
order
(TODO)
index
order
order
index
(TODO)
index
(TODO)
index
(TODO)
index
(TODO)
index
index
(TODO)
index
(TODO)
index
{
hook: {
imageDeleteAfter: function (imageItem) {
var src = imgItem.src;
$.post('/rest/file/deletebyurl', {downloadUrl: src});
}
}
}
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