<!DOCTYPE html>
< html >
< head lang = 'zh' >
< meta charset = 'utf-8' >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
< meta name = "renderer" content = "webkit" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1,user-scalable=0" / >
< title > Luckysheet< / title >
< link rel = 'stylesheet' href = './plugins/css/pluginsCss.css' / >
< link rel = 'stylesheet' href = './plugins/plugins.css' / >
< link rel = 'stylesheet' href = './css/luckysheet.css' / >
< link rel = 'stylesheet' href = './assets/iconfont/iconfont.css' / >
< script src = "./plugins/js/plugin.js" > < / script >
<!-- rollup luckysheet.js -->
< script src = "./luckysheet.umd.js" > < / script >
< / head >
< body >
<!-- Non - full screen test -->
<!-- <div style="position: relative;width: 100%;height: 100%;">
< div id = "luckysheet" style = "margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;" > < / div >
< / div > -->
< div id = "luckysheet" style = "margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;" > < / div >
<!-- demo feature, non - production use -->
< script src = "./demoData/demoFeature.js" > < / script >
< script src = "./demoData/sheetFormula.js" > < / script >
< script src = "./demoData/sheetCell.js" > < / script >
< script src = "./demoData/sheetConditionFormat.js" > < / script >
< script src = "./demoData/sheetTable.js" > < / script >
< script src = "./demoData/sheetComment.js" > < / script >
< script src = "./demoData/sheetPivotTableData.js" > < / script >
< script src = "./demoData/sheetPivotTable.js" > < / script >
< script src = "./demoData/sheetSparkline.js" > < / script >
< script src = "./demoData/sheetChart.js" > < / script >
< script src = "./demoData/sheetPicture.js" > < / script >
< script src = "./demoData/sheetDataVerification.js" > < / script >
< script >
// import sheetFormula from './demoData/sheetFormula.js'
// import sheetCell from './demoData/sheetCell.js'
// import sheetConditionFormat from './demoData/sheetConditionFormat.js'
// import sheetTable from './demoData/sheetTable.js'
// import sheetComment from './demoData/sheetComment.js'
// import sheetPivotTableData from './demoData/sheetPivotTableData.js'
// import sheetPivotTable from './demoData/sheetPivotTable.js'
// import sheetSparkline from './demoData/sheetSparkline.js'
// import sheetChart from './demoData/sheetChart.js'
// import sheetPicture from './demoData/sheetPicture.js'
// import sheetDataVerification from './demoData/sheetDataVerification.js'
$(function () {
// According to the browser language
var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
var isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
var gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
var options = null;
if(isShare || gridKey){
// http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
if(!gridKey){
alert('If gridKey is not provided in the address bar, please add it in the source code')
}
options = {
container: "luckysheet",
lang: lang,
allowUpdate:true,
updateImageUrl: location.origin + "/luckysheet/api/updateImg",
updateUrl: "ws://"+ location.host +"/luckysheet/websocket/luckysheet",
gridKey: gridKey,
loadUrl: location.origin + "/luckysheet/api/load",
loadSheetUrl: location.origin + "/luckysheet/api/loadsheet"
}
}else{
// http://localhost:3000/
options = {
container: 'luckysheet',
lang: lang,
// pager: {
// pageIndex: 1,
// pageSize: 10,
// total: 50,
// selectOption: [10, 20]
// },
forceCalculation:false,
plugins: ['chart'],
fontList:[
{
"fontName":"HanaleiFill",
"url":"./assets/iconfont/HanaleiFill-Regular.ttf"
},
{
"fontName":"Anton",
"url":"./assets/iconfont/Anton-Regular.ttf"
},
{
"fontName":"Pacifico",
"url":"./assets/iconfont/Pacifico-Regular.ttf"
}
],
hook:{
cellDragStop: function (cell, postion, sheetFile, ctx, event) {
// console.info(cell, postion, sheetFile, ctx, event);
},
rowTitleCellRenderBefore:function(rowNum,postion,ctx){
// console.log(rowNum);
},
rowTitleCellRenderAfter:function(rowNum,postion,ctx){
// console.log(ctx);
},
columnTitleCellRenderBefore:function(columnAbc,postion,ctx){
// console.log(columnAbc);
},
columnTitleCellRenderAfter:function(columnAbc,postion,ctx){
// console.log(postion);
},
cellRenderBefore:function(cell,postion,sheetFile,ctx){
// console.log(cell,postion,sheetFile,ctx);
},
cellRenderAfter:function(cell,postion,sheetFile,ctx){
// console.log(postion);
},
cellMousedownBefore:function(cell,postion,sheetFile,ctx){
// console.log(postion);
},
cellMousedown:function(cell,postion,sheetFile,ctx){
// console.log(sheetFile);
},
sheetMousemove:function(cell,postion,sheetFile,moveState,ctx){
// console.log(cell,postion,sheetFile,moveState,ctx);
},
sheetMouseup:function(cell,postion,sheetFile,moveState,ctx){
// console.log(cell,postion,sheetFile,moveState,ctx);
},
cellAllRenderBefore:function(data,sheetFile,ctx){
// console.info(data,sheetFile,ctx)
},
updated:function(operate){
// console.info(operate)
},
cellUpdateBefore:function(r,c,value,isRefresh){
// console.info('cellUpdateBefore',r,c,value,isRefresh)
},
cellUpdated:function(r,c,oldValue, newValue, isRefresh){
// console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
},
sheetActivate:function(index, isPivotInitial, isNewSheet){
// console.info(index, isPivotInitial, isNewSheet)
},
rangeSelect:function(index, sheet){
// console.info(index, sheet)
},
commentInsertBefore:function(r, c){
// console.info(r, c)
},
commentInsertAfter:function(r, c, cell){
// console.info(r, c, cell)
},
commentDeleteBefore:function(r, c, cell){
// console.info(r, c, cell)
},
commentDeleteAfter:function(r, c, cell){
// console.info(r, c, cell)
},
commentUpdateBefore:function(r, c, value){
// console.info(r, c, value)
},
commentUpdateAfter:function(r, c, oldCell, newCell ){
// console.info(r, c, oldCell, newCell)
},
cellEditBefore:function(range ){
// console.info(range)
},
workbookCreateAfter:function(json){
// console.info(json)
},
rangePasteBefore:function(range,data){
// console.info('rangePasteBefore',range,data)
// return false; //Can intercept paste
},
},
//data:[{"name":"Sheet1","config":{"columnlen":{"1":88,"2":76,"3":88,"4":69,"5":88,"6":69,"7":83,"8":62,"9":83,"10":55,"11":83,"12":62,"13":88,"14":76,"15":88,"16":69,"17":88,"18":69},"customWidth":{"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"borderInfo":[{"rangeType":"cell","value":{"row_index":0,"col_index":0,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":1,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":2,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":3,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":4,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":5,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":6,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":7,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":8,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":9,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":10,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":11,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":12,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":13,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":14,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":15,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":16,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":17,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":0,"col_index":18,"l":{"style":1,"color":"#302B2F"},"r":{"style":1,"color":"#302B2F"},"t":{"style":1,"color":"#302B2F"},"b":{"style":1,"color":"#302B2F"}}},{"rangeType":"cell","value":{"row_index":1,"c
data:
[sheetCell,sheetFormula,sheetConditionFormat,sheetSparkline,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable,sheetChart,sheetPicture,sheetDataVerification]
/*data:[{
"name": "Cell",
"config": {
"curentsheetView":"viewNormal",//viewNormal, viewLayout, viewPage
"sheetViewZoom":{
"viewNormalZoomScale": 1 ,
"viewLayoutZoomScale":1 ,
"viewPageZoomScale":0.6,
},
"printoptions":{
unit:"mm",//mm(default), in, pt, cm, m,
PrintArea:"$A$1:$S$31",//print range
PrintTitles:{//row column
row:"Sheet1!$1:$1",
column:"Sheet1!$C:$C"
},
printOptions:{
horizontalCentered:0,//align
verticalCentered:0,//valign
headings:0,//show row and column
gridLines:0,//show gridlines
},
pageMargins:{
left:0.7,//Left Page Margin, inch
right:0.7,//Right page margin, inch
top:0.75,//Top Page Margin, inch
bottom:0.75,//Bottom Page Margin, inch
header:0.3,//Header Page Margin, date,sheet name, page , custom etc, inch.
footer:0.3,//Footer Page Margin, date,sheet name, page , custom etc, inch.
},
pageSetup:{
copies:1,//Number of copies to print.
draft:0,//Print without graphics about image and chart
paperSize:9,//1Letter ,3Tabloid, 5Legal ,6Statement ,7Executive ,8A3 ,9A4 ,11A5 ,12B4 ,13B5
paperHeight:null,//Height of custom paper as a number followed by a unit identifier. [Example: 297mm, 11inend example],When paperHeight and paperWidth are specified, paperSize shall be ignored.
paperWidth:null,//Width of custom paper as a number followed by a unit identifier. [Example: 21cm, 8.5inend example]
fitToWidth:0,//Number of horizontal pages to fit on.
fitToHeight:0,//Number of vertical pages to fit on.
scale:100,//Print scaling. This attribute is restricted to values ranging from 10 to 400.
orientation:0,//0defualt,1landscape,2portrait
blackAndWhite:0,
cellComments:0,//This attribute specifies how to print cell comments, 2 asDisplayed, 1 atEnd, 0 none
errors:0,//Specifies how to print cell values for cells with errors, 0 blank(Show Cell Errors As Blank),1 dash(Dash Cell Errors),2 displayed(Display Cell Errors),3 NA
horizontalDpi:null,//Vertical print resolution of the device.
verticalDpi:null,//Vertical print resolution of the device.
pageOrder:0, //0 downThenOver ,1 overThenDown
firstPageNumber:null,//Page number for first printed page. If no value is specified, then 'automatic' is assumed.
useFirstPageNumber:0,//Use firstPageNumber value for first page number, and do not auto number the pages.
usePrinterDefaults:1,//applay default when config is null,
},
headerFooter:{
firstFooter:{
left:[//& L
{
"ff":"Arial", //font family & "-,Regular" or & "font name,font type"
"fc":"#fff000",//font color & K
"fs":12,//font size & font-size
"cl":0,//strike
"un":0,//underline & E double, & U single
"bl":0,//blod & B
"it":0,//italic & I
"ss":0,//0 none 1sup & X, 2sub & Y
v:"我在马路\r\n边捡到\r\n\r\n一分钱"
}
],
center:[],//& C
right:[],//& R
}, //First Page Footer
firstHeader:null, //First Page Header
oddFooter:"& C第 & P 页& R& G", //Odd Page Footer
oddHeader:"& L& G& C& A& F",//Odd Header
evenFooter:null,//Even Page Footer
evenHeader:null,//Even Page Header
drawingHF:{//Drawing Reference in Header Footer
LF:{//left footer
type:"#_x0000_t75",
imagedata:"",
style:"",
},
RF:{},//right footer
CF:{},//center footer
LH:{},//left header
RH:{},//right header
CH:{},//center header
},
},
rowBreaks:{
"rowBreaks_1":{
rowIndex:68,
man:1,
},
},
colBreaks:{
"colBreaks_1":{
colIndex:5,
man:1,
max:16383,
},
"colBreaks_2":{
colIndex:11,
man:1,
max:1048575,
},
"colBreaks_3":{
colIndex:17,
man:1,
max:1048575
},
}
},
"merge": {
"13_5": {
"r": 13,
"c": 5,
"rs": 3,
"cs": 1
},
"13_7": {
"r": 13,
"c": 7,
"rs": 3,
"cs": 2
},
"14_2": {
"r": 14,
"c": 2,
"rs": 1,
"cs": 2
},
"15_10": {
"r": 15,
"c": 10,
"rs": 4,
"cs": 3
}
},
"borderInfo": [
{
"rangeType": "cell",
"value": {
"row_index": 3,
"col_index": 3,
"l": {
"style": 10,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 10,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 10,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 10,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 3,
"col_index": 4,
"l": {
"style": 10,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 10,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 10,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 10,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 3,
"col_index": 5,
"l": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 3,
"col_index": 6,
"l": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 3,
"col_index": 7,
"l": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 3,
"col_index": 8,
"l": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 1,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 5,
"col_index": 2,
"l": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 5,
"col_index": 3,
"l": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 5,
"col_index": 4,
"l": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 5,
"col_index": 5,
"l": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 5,
"col_index": 6,
"l": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 1,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 5,
"col_index": 7,
"l": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 1,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 1,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 5,
"col_index": 8,
"l": {
"style": 2,
"color": "rgb(255, 0, 0)"
},
"r": {
"style": 2,
"color": "rgb(255, 0, 0)"
},
"t": {
"style": 2,
"color": "rgb(255, 0, 0)"
},
"b": {
"style": 2,
"color": "rgb(255, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 7,
"col_index": 2,
"l": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"r": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"t": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"b": {
"style": 9,
"color": "rgb(0, 0, 255)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 7,
"col_index": 3,
"l": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"r": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"t": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"b": {
"style": 9,
"color": "rgb(0, 0, 255)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 7,
"col_index": 5,
"l": {
"style": 2,
"color": "rgb(154, 205, 50)"
},
"t": {
"style": 2,
"color": "rgb(154, 205, 50)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 7,
"col_index": 6,
"r": {
"style": 2,
"color": "rgb(154, 205, 50)"
},
"t": {
"style": 2,
"color": "rgb(154, 205, 50)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 7,
"col_index": 8,
"r": {
"style": 9,
"color": "rgb(0, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(0, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 7,
"col_index": 9,
"l": {
"style": 9,
"color": "rgb(0, 0, 0)"
},
"b": {
"style": 9,
"color": "rgb(0, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 8,
"col_index": 2,
"l": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"r": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"t": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"b": {
"style": 9,
"color": "rgb(0, 0, 255)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 8,
"col_index": 3,
"l": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"r": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"t": {
"style": 9,
"color": "rgb(0, 0, 255)"
},
"b": {
"style": 9,
"color": "rgb(0, 0, 255)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 8,
"col_index": 5,
"l": {
"style": 2,
"color": "rgb(154, 205, 50)"
},
"b": {
"style": 2,
"color": "rgb(154, 205, 50)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 8,
"col_index": 6,
"r": {
"style": 2,
"color": "rgb(154, 205, 50)"
},
"b": {
"style": 2,
"color": "rgb(154, 205, 50)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 8,
"col_index": 8,
"r": {
"style": 9,
"color": "rgb(0, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(0, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 8,
"col_index": 9,
"l": {
"style": 9,
"color": "rgb(0, 0, 0)"
},
"t": {
"style": 9,
"color": "rgb(0, 0, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 10,
"col_index": 2,
"l": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"t": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"b": {
"style": 1,
"color": "rgb(144, 238, 144)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 10,
"col_index": 3,
"r": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"t": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"b": {
"style": 1,
"color": "rgb(144, 238, 144)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 10,
"col_index": 5,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"t": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 10,
"col_index": 6,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"t": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 10,
"col_index": 7,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"t": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 11,
"col_index": 2,
"l": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"t": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"b": {
"style": 1,
"color": "rgb(144, 238, 144)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 11,
"col_index": 3,
"r": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"t": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"b": {
"style": 1,
"color": "rgb(144, 238, 144)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 11,
"col_index": 5,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 11,
"col_index": 6,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 11,
"col_index": 7,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 12,
"col_index": 2,
"l": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"t": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"b": {
"style": 1,
"color": "rgb(144, 238, 144)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 12,
"col_index": 3,
"r": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"t": {
"style": 1,
"color": "rgb(144, 238, 144)"
},
"b": {
"style": 1,
"color": "rgb(144, 238, 144)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 12,
"col_index": 5,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"b": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 12,
"col_index": 6,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"b": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 12,
"col_index": 7,
"l": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"r": {
"style": 1,
"color": "rgb(205, 205, 0)"
},
"b": {
"style": 1,
"color": "rgb(205, 205, 0)"
}
}
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "2",
"color": "#000",
"range": [
{
"row": [
3,
3
],
"column": [
3,
4
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "2",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
3,
4
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "4",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
4,
4
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "3",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
4,
4
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "3",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
3,
3
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "2",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
3,
3
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "2",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
5,
5
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "2",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
8,
8
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "2",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
3,
8
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "4",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
7,
7
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "1",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
8,
8
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "5",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
6,
6
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "6",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
5,
5
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "3",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
4,
4
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "3",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
4,
4
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "2",
"color": "#ff0000",
"range": [
{
"row": [
3,
3
],
"column": [
3,
3
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "2",
"color": "#ff0000",
"range": [
{
"row": [
5,
5
],
"column": [
2,
9
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "9",
"color": "#ff0000",
"range": [
{
"row": [
5,
5
],
"column": [
5,
5
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "8",
"color": "#ff0000",
"range": [
{
"row": [
5,
5
],
"column": [
6,
6
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "13",
"color": "#ff0000",
"range": [
{
"row": [
5,
5
],
"column": [
7,
7
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "13",
"color": "#ff0000",
"range": [
{
"row": [
6,
6
],
"column": [
11,
11
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "10",
"color": "#ff0000",
"range": [
{
"row": [
5,
5
],
"column": [
4,
4
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "11",
"color": "#ff0000",
"range": [
{
"row": [
5,
5
],
"column": [
3,
3
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "11",
"color": "#ff0000",
"range": [
{
"row": [
7,
8
],
"column": [
2,
3
]
}
]
},
{
"rangeType": "range",
"borderType": "border-all",
"style": "3",
"color": "#0000ff",
"range": [
{
"row": [
7,
8
],
"column": [
2,
3
]
}
]
},
{
"rangeType": "range",
"borderType": "border-inside",
"style": "3",
"color": "#0000ff",
"range": [
{
"row": [
7,
8
],
"column": [
8,
9
]
}
]
},
{
"rangeType": "range",
"borderType": "border-inside",
"style": "9",
"color": "#0000ff",
"range": [
{
"row": [
7,
8
],
"column": [
8,
9
]
}
]
},
{
"rangeType": "range",
"borderType": "border-inside",
"style": "2",
"color": "#0000ff",
"range": [
{
"row": [
7,
8
],
"column": [
8,
9
]
}
]
},
{
"rangeType": "range",
"borderType": "border-inside",
"style": "9",
"color": "#0000ff",
"range": [
{
"row": [
7,
8
],
"column": [
8,
9
]
}
]
},
{
"rangeType": "cell",
"value": {
"row_index": 10,
"col_index": 10,
"l": {
"color": "#ff0000",
"style": "13"
},
"r": {
"color": "#ff0000",
"style": "13"
},
"t": {
"color": "#ff0000",
"style": "13"
},
"b": {
"color": "#ff0000",
"style": "13"
}
}
},
{
"rangeType": "cell",
"value": {
"row_index": 6,
"col_index": 11,
"l": null,
"r": null,
"t": null,
"b": null
}
},
{
"rangeType": "cell",
"value": {
"row_index": 10,
"col_index": 10,
"l": null,
"r": null,
"t": null,
"b": null
}
},
{
"rangeType": "range",
"borderType": "border-outside",
"style": "13",
"color": "#00ff00",
"range": [
{
"row": [
10,
12
],
"column": [
2,
3
]
}
]
},
{
"rangeType": "range",
"borderType": "border-horizontal",
"style": "13",
"color": "#00ff00",
"range": [
{
"row": [
10,
12
],
"column": [
2,
3
]
}
]
},
{
"rangeType": "range",
"borderType": "border-vertical",
"style": "13",
"color": "#ff9900",
"range": [
{
"row": [
10,
12
],
"column": [
5,
7
]
}
]
},
{
"rangeType": "range",
"borderType": "border-outside",
"style": "13",
"color": "#ff9900",
"range": [
{
"row": [
10,
12
],
"column": [
5,
7
]
}
]
},
{
"rangeType": "range",
"borderType": "border-none",
"style": "1",
"color": "#ff9900",
"range": [
{
"row": [
19,
19
],
"column": [
6,
6
]
}
]
}
],
"rowlen": {
"0": 20,
"1": 20,
"2": 20,
"3": 20,
"4": 20,
"5": 20,
"6": 20,
"7": 20,
"8": 20,
"9": 20,
"10": 20,
"11": 20,
"12": 20,
"13": 20,
"14": 20,
"15": 20,
"16": 20,
"17": 31,
"18": 20,
"19": 20,
"20": 20,
"21": 20,
"22": 20,
"23": 20,
"24": 20,
"25": 79,
"26": 20,
"27": 20,
"28": 80,
"29": 36
},
"columnlen": {
"0": 131,
"2": 153,
"3": 128,
"4": 136,
"5": 122,
"6": 138,
"7": 131,
"8": 128,
"9": 140,
"10": 144
},
"rowhidden": {
"30": 0,
"31": 0
},
"customHeight": {
"29": 1
},
"customWidth": {
"2": 1
}
},
"index": "0",
"zoomRatio": 1,
"order": "0",
"column": 18,
"row": 36,
"status": 1,
"celldata": [{"r":0,"c":0,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1,"v":"1","ct":{"fa":"General","t":"n"},"m":"1"}},{"r":0,"c":1,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1,"v":2,"ct":{"fa":"General","t":"n"},"m":"2"}},{"r":0,"c":2,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1,"v":3,"ct":{"fa":"General","t":"n"},"m":"3"}},{"r":0,"c":3,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1,"v":0,"ct":{"fa":"###.00","t":"n"},"m":"0","f":"=A1/B1"}},{"r":0,"c":4,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":0,"c":5,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":0,"c":6,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":0,"c":7,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":0,"c":8,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":0,"c":9,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":0,"c":10,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":0,"v":{"v":"Background","ct":{"fa":"General","t":"g"},"m":"Background","bg":null,"bl":1,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":1,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":2,"v":{"bg":"rgb(30, 144, 255)","bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":3,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":4,"v":{"bg":"rgb(0, 255, 0)","bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":5,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":6,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":7,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":8,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":9,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":1,"c":10,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":0,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":1,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":2,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":3,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":4,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":5,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":6,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":7,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":8,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":9,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":2,"c":10,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":3,"c":0,"v":{"v":"Border","ct":{"fa":"General","t":"g"},"m":"Border","bg":null,"bl":1,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":3,"c":1,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":3,"c":2,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":3,"c":3,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":3,"c":4,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":3,"c":5,"v":{"bg":null,"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"v
"ch_width": 2361,
"rh_height": 936,
"luckysheet_select_save": [
{
"left": 741,
"width": 138,
"top": 796,
"height": 19,
"left_move": 741,
"width_move": 138,
"top_move": 796,
"height_move": 19,
"row": [
33,
33
],
"column": [
6,
6
],
"row_focus": 33,
"column_focus": 6
}
],
"calcChain": [
{
"r": 0,
"c": 3,
"index": "0",
"func": [
true,
3,
"=Formula!A1+Formula!B1"
],
"color": "w",
"parent": null,
"chidren": {},
"times": 0
}
],
"scrollLeft": 0,
"scrollTop": 0
}]*/
}
}
options.loading={
image:()=>{
return `< svg viewBox = "25 25 50 50" class = "circular" >
< circle cx = "50" cy = "50" r = "20" fill = "none" > < / circle >
< / svg > `
},
imageClass:"loadingAnimation"
}
options.cellRightClickConfig = {
customs: [{
title: 'test',
onClick: function (clickEvent, event, params) {
console.log('function test click', clickEvent, event, params)
}
}]
}
luckysheet.create(options);
})
< / script >
< style >
/* 自定义loading演示样式 */
@keyframes loading-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
.loadingAnimation {
width: 3em;
height: 3em;
animation: loading-rotate 2s linear infinite;
}
.loadingAnimation circle {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: currentColor;
stroke-linecap: round;
}
< / style >
< / body >
< / html >
