|
|
|
|
<!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>
|
|
|
|
|
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
|
|
|
|
|
<!-- 1 -->
|
|
|
|
|
<!-- 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/qksheet",
|
|
|
|
|
gridKey: gridKey,
|
|
|
|
|
loadUrl: location.origin + "/luckysheet/api/load",
|
|
|
|
|
loadSheetUrl: location.origin + "/luckysheet/api/loadsheet"
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
// http://localhost:3000/
|
|
|
|
|
options = {
|
|
|
|
|
container: 'luckysheet',
|
|
|
|
|
lang: lang,
|
|
|
|
|
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:{
|
|
|
|
|
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)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
//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]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
luckysheet.create(options);
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
