Luckysheet如何初始化含合并单元格的数据
问题
Luckysheet是一款功能很丰富的在线电子表格插件,但是初始版本demo不够完善,笔者结合身边朋友的经验,给出合并单元格的案例供参考.
解决方案
先手动设置几个合并单元格,然后控制台使用 luckysheet.getluckysheetfile()
打印sheet信息, 复制出当前页config和data参数,就是合并单元格需要用到的信息,其中data还需要处理下才能用到初始化中使用.
参考的数据转化方案:
// data => celldata
luckysheet.sheetmanage.getGridData(luckysheet.flowdata)
// celldata => data
luckysheet.sheetmanage.buildGridData(file)
代码
luckysheet.create({
container: 'luckysheet',
data: [
{
"name": "分公司",
"color": "",
"config": {
"merge": {
"0_0": {
"rs": 2,
"cs": 1,
"r": 0,
"c": 0
},
"0_1": {
"rs": 1,
"cs": 2,
"r": 0,
"c": 1
},
"0_3": {
"rs": 2,
"cs": 2,
"r": 0,
"c": 3
},
"1_1": {
"rs": 1,
"cs": 2,
"r": 1,
"c": 1
}
},
"rowlen": {}
},
"index": "0",
"chart": [
{
"sheetIndex": "0",
"dataSheetIndex": "0",
"chartType": "column",
"row": "[1,3]",
"column": "[3,3]",
"chartStyle": "default",
"myWidth": "480",
"myHeight": "288",
"myLeft": "67",
"myTop": "11"
}
],
"status": "1",
"order": "0",
"column": 12,
"row": 36,
"celldata": [{"r":0,"c":0,"v":{"ct":{"fa":"General","t":"g"},"v":"数据1","m":"数据1","mc":{"r":0,"c":0,"rs":2,"cs":1},"ht":"0","vt":"0","bl":1,"bg":"#fce5cd"}},{"r":0,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据2","m":"数据2","mc":{"r":0,"c":1,"rs":1,"cs":2},"ht":"0","bl":1,"bg":"#fce5cd"}},{"r":0,"c":2,"v":{"mc":{"r":0,"c":1},"ht":"0","bl":1,"bg":"#fce5cd"}},{"r":0,"c":3,"v":{"ct":{"fa":"General","t":"g"},"v":"数据4","m":"数据4","mc":{"r":0,"c":3,"rs":2,"cs":2},"vt":"0","ht":"0","bl":1,"bg":"#fce5cd"}},{"r":0,"c":4,"v":{"mc":{"r":0,"c":3},"vt":"0","ht":"0","bl":1,"bg":"#fce5cd"}},{"r":0,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据6","m":"数据6","bl":1,"bg":"#fce5cd"}},{"r":1,"c":0,"v":{"mc":{"r":0,"c":0},"ht":"0","vt":"0","bl":1,"bg":"#fce5cd"}},{"r":1,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据3","m":"数据3","mc":{"r":1,"c":1,"rs":1,"cs":2},"ht":"0","bl":1,"bg":"#fce5cd"}},{"r":1,"c":2,"v":{"mc":{"r":1,"c":1},"ht":"0","bl":1,"bg":"#fce5cd"}},{"r":1,"c":3,"v":{"mc":{"r":0,"c":3},"vt":"0","ht":"0","bl":1,"bg":"#fce5cd"}},{"r":1,"c":4,"v":{"mc":{"r":0,"c":3},"vt":"0","ht":"0","bl":1,"bg":"#fce5cd"}},{"r":1,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据7","m":"数据7","bl":1,"bg":"#fce5cd"}},{"r":2,"c":0,"v":{"ct":{"fa":"General","t":"g"},"v":"数据3","m":"数据3"}},{"r":2,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据4","m":"数据4"}},{"r":2,"c":2,"v":{"ct":{"fa":"General","t":"g"},"v":"数据5","m":"数据5"}},{"r":2,"c":3,"v":{"ct":{"fa":"General","t":"g"},"v":"数据6","m":"数据6"}},{"r":2,"c":4,"v":{"ct":{"fa":"General","t":"g"},"v":"数据7","m":"数据7"}},{"r":2,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据8","m":"数据8"}},{"r":3,"c":0,"v":{"ct":{"fa":"General","t":"g"},"v":"数据4","m":"数据4"}},{"r":3,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据5","m":"数据5"}},{"r":3,"c":2,"v":{"ct":{"fa":"General","t":"g"},"v":"数据6","m":"数据6"}},{"r":3,"c":3,"v":{"ct":{"fa":"General","t":"g"},"v":"数据7","m":"数据7"}},{"r":3,"c":4,"v":{"ct":{"fa":"General","t":"g"},"v":"数据8","m":"数据8"}},{"r":3,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据9","m":"数据9"}},{"r":4,"c":0,"v":{"ct":{"fa":"General","t":"g"},"v":"数据5","m":"数据5"}},{"r":4,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据6","m":"数据6"}},{"r":4,"c":2,"v":{"ct":{"fa":"General","t":"g"},"v":"数据7","m":"数据7"}},{"r":4,"c":3,"v":{"ct":{"fa":"General","t":"g"},"v":"数据8","m":"数据8"}},{"r":4,"c":4,"v":{"ct":{"fa":"General","t":"g"},"v":"数据9","m":"数据9"}},{"r":4,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据10","m":"数据10"}},{"r":5,"c":0,"v":{"ct":{"fa":"General","t":"g"},"v":"数据6","m":"数据6"}},{"r":5,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据7","m":"数据7"}},{"r":5,"c":2,"v":{"ct":{"fa":"General","t":"g"},"v":"数据8","m":"数据8"}},{"r":5,"c":3,"v":{"ct":{"fa":"General","t":"g"},"v":"数据9","m":"数据9"}},{"r":5,"c":4,"v":{"ct":{"fa":"General","t":"g"},"v":"数据10","m":"数据10"}},{"r":5,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据11","m":"数据11"}},{"r":6,"c":0,"v":{"ct":{"fa":"General","t":"g"},"v":"数据7","m":"数据7"}},{"r":6,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据8","m":"数据8"}},{"r":6,"c":2,"v":{"ct":{"fa":"General","t":"g"},"v":"数据9","m":"数据9"}},{"r":6,"c":3,"v":{"ct":{"fa":"General","t":"g"},"v":"数据10","m":"数据10"}},{"r":6,"c":4,"v":{"ct":{"fa":"General","t":"g"},"v":"数据11","m":"数据11"}},{"r":6,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据12","m":"数据12"}},{"r":7,"c":0,"v":{"ct":{"fa":"General","t":"g"},"v":"数据8","m":"数据8"}},{"r":7,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据9","m":"数据9"}},{"r":7,"c":2,"v":{"ct":{"fa":"General","t":"g"},"v":"数据10","m":"数据10"}},{"r":7,"c":3,"v":{"ct":{"fa":"General","t":"g"},"v":"数据11","m":"数据11"}},{"r":7,"c":4,"v":{"ct":{"fa":"General","t":"g"},"v":"数据12","m":"数据12"}},{"r":7,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据13","m":"数据13"}},{"r":8,"c":0,"v":{"ct":{"fa":"General","t":"g"},"v":"数据9","m":"数据9"}},{"r":8,"c":1,"v":{"ct":{"fa":"General","t":"g"},"v":"数据10","m":"数据10"}},{"r":8,"c":2,"v":{"ct":{"fa":"General","t":"g"},"v":"数据11","m":"数据11"}},{"r":8,"c":3,"v":{"ct":{"fa":"General","t":"g"},"v":"数据12","m":"数据12"}},{"r":8,"c":4,"v":{"ct":{"fa":"General","t":"g"},"v":"数据13","m":"数据13"}},{"r":8,"c":5,"v":{"ct":{"fa":"General","t":"g"},"v":"数据14","m":"数据14"}}],
"visibledatarow": [],
"visibledatacolumn": [],
"rowsplit": [],
"ch_width": 4748,
"rh_height": 1790,
"luckysheet_select_save": [
{
"row": [
0,
1
],
"column": [
0,
0
]
}
],
"luckysheet_selection_range": [],
"scrollLeft": 0,
"scrollTop": 0
}
]
})
更多学习笔记欢迎访问:DuShuSir.com
分类:
前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)