JS实现的类似excel的在线表格
1.LuckySheet简介
Luckysheet ，是⼀款国产的纯JS实现的类似excel的在线表格，功能强⼤、配置简单、完全开源。
2.基本使⽤
要使⽤LuckySheet，有2种⽅式，可以从官⽹下载JS，然后引⼊本地页⾯，也可以引⼊CDN
2.1引⼊JS：
1 2 3 4 5 6<link rel='stylesheet'href='./plugins/css/pluginsCss.css'/> <link rel='stylesheet'href='./plugins/plugins.css'/>
<link rel='stylesheet'href='./css/luckysheet.css'/>
jquery在线库<link rel='stylesheet'href='./assets/iconfont/iconfont.css'/> <script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>
2.2 在HTML⾥放置⼀个div作为Excel容器
1
2<div id="luckysheet"></div>
在上⾯的style⾥，定义了 position:absolute，⽬前luckysheet默认会占⽤全部空间
事实上，在页⾯下⾯放置保存按钮，⼀直⽆法显⽰
⽬前，我的做法是，把保存按钮放在页⾯上部。
2.3初始化Excel
1 2 3 4 5 6 7 8 9<script>
$(function () {
//配置项
var options = {
container: 'luckysheet'//luckysheet为容器id }
})
</script>
这样，⼀个在线Excel就完成了。
LuckySheet只提供前端的操作，数据保存要由开发⼈员⾃⼰实现。
2.4 数据保存
数据保存分为两种，⼀种是：实时保存，⼀种是“全部保存”。实时保存⽐较复杂，现在介绍⼀种简单的全部保存⽅法。LuckySheet提供了⼀个 AllSheets() ⽅法，
调⽤此⽅法，Luckysheet系统会把所有数据⼀股脑的传递给你，
你可以再页⾯的OnClick的保存事件⾥保存这些数据，然后利⽤Jquery的Post⽅法，接收数据写⼊数据库。
下⾯代码演⽰了把Luckysheet POST到 xls.aspx 页⾯
1 2 3 4 5 6 7 8function save() {
var data2 = AllSheets(); var cnt = JSON.stringify(data2);
$.post("xls.aspx", {
cnt: cnt <br><br> });
}
在 xls.aspx页⾯，利⽤ Reque["cnt"] 就可以获取所有数据，然后保存到数据库。
2.5 数据还原
LuckySheet提供了loadUrl属性，当前端初始化完毕后，luckysheet会调⽤此属性加载初始化数据所以，利⽤此属性，可以还原数据库⾥保存的数据。
1
2 3 4 5 6 7 8 9 10 11 12 13 14var options = {
container: 'luckysheet',
lang: 'zh',
showinfobar: false,
row: 20,
column: 15,
plugins: ['chart'],
showstatisticBar: false,
loadUrl: 'data.aspx?id=11', //还原数据URL showsheetbar: false,
showsheetbarConfig: {
add: false,
menu: false,
},
3.数据缓存
（1） Luckysheet允许在本地加载Luckysheet需要的JS,CSS等，但是这些JS,CSS⽐较⼤，为此，可以利⽤link的 prefetch预加载CSS,JS
1 2 3 4 5 6 7 <link rel="prefetch"href="../javascript/luckysheet/plugins/css/pluginsCss.css"/> <link rel="prefetch"href="../javascript/luckysheet/plugins/plugins.css"/>
<link rel="prefetch"href="../javascript/luckysheet/css/luckysheet.css"/>
<link rel="prefetch"href="../javascript/luckysheet/assets/iconfont/iconfont.css"/> <link rel="prefetch"href="../javascript/luckysheet/plugins/js/plugin.js"/>
<link rel="prefetch"href="../javascript/luckysheet/luckysheet.umd.js"/>
/>
（2）Luckysheet在插⼊图⽚时，图⽚会议Base64格式存储，所以，最终保存的数据可能⾮常⼤。
（3）需要理解Excel的⼀些简单概念：⼀个Excel是由多个Sheet组成，⽽⼀个Sheet是由多个Cell组成，⽽每个单元格都会包括 r，c，v r：单元格的⾏ row
c：单元格的列 column
v：单元格的值 value
在使⽤实时保存时，⼆维数组数据转化成 {r, c, v}格式⼀维数组。实时保存数据量⼩，但是⽐较复杂。
4. Excel的数据导⼊和导出
LuckySheet提供了⼀个LuckyExcel，他⽀持Excel的导⼊和导出。
5.⽣成图表
Luckysheet可以使⽤Echart⽣成图表组件（饼形图，柱状图，曲线图等）。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论