1.LuckySheet簡介
Luckysheet ,是一款國產的純JS實現的類似excel的線上表格,功能強大、配置簡單、完全開源。
開源地址 https://gitee.com/mengshukeji/Luckysheet
線上演示:https://mengshukeji.gitee.io/luckysheetdemo/
2.基本使用
要使用LuckySheet,有2種方式,可以從官網下載JS,然後引入本地頁面,也可以引入CDN
2.1引入JS:
<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> <script src="./luckysheet.umd.js"></script>
2.2 在HTML裡放置一個div作為Excel容器
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
在上面的style裡,定義了 position:absolute,目前luckysheet預設會佔用全部空間
事實上,在頁面下面放置 儲存按鈕,一直無法顯示
目前,我的做法是,把儲存按鈕放在頁面上部。
2.3初始化Excel
<script> $(function () { //配置項 var options = { container: 'luckysheet' //luckysheet為容器id } luckysheet.create(options) }) </script>
這樣,一個線上Excel就完成了。
LuckySheet只提供前端的操作,資料儲存要由開發人員自己實現。
2.4 資料儲存
資料儲存分為兩種,一種是:實時儲存,一種是“全部儲存”。實時儲存比較複雜,現在介紹一種簡單的全部儲存方法。
LuckySheet提供了一個 luckysheet.getAllSheets() 方法,
呼叫此方法,Luckysheet系統會把所有資料一股腦的傳遞給你,
你可以再頁面的OnClick的儲存事件裡儲存這些資料,然後利用Jquery的Post方法,接收資料寫入資料庫。
下面程式碼演示了把Luckysheet POST到 xls.aspx 頁面
function save() { var data2 = luckysheet.getAllSheets(); var cnt = JSON.stringify(data2); $.post("xls.aspx", { cnt: cnt
}); }
在 xls.aspx頁面,利用 Reque["cnt"] 就可以獲取所有資料,然後儲存到資料庫。
2.5 資料還原
LuckySheet提供了loadUrl屬性,當前端初始化完畢後,luckysheet會呼叫此屬性載入初始化資料
所以,利用此屬性,可以還原資料庫裡儲存的資料。
var 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
<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的匯入和匯出。
演示 https://mengshukeji.gitee.io/luckyexceldemo/
5.生成圖表
Luckysheet可以使用Echart生成圖表元件(餅形圖,柱狀圖,曲線圖等)。
本文是我再製作啟明星知識庫 http://demo.dotnetcms.org/kbase 使用luckysheet的一些心得。
更多詳細介紹,請參考Luckysheet的官網 https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/。