1. Introduction to lucky sheet

Luckysheet is a domestic pure JS online form similar to excel. It has powerful functions, simple configuration and is completely open source.

Open source address https://gitee.com/mengshukeji/Luckysheet

Online presentation: https://mengshukeji.gitee.io/luckysheetdemo/

 

 2. Basic use

There are two ways to use the lucky sheet. You can download JS from the official website and then import the local page or CDN

2.1 introduction of 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' /> <link rel='stylesheet' href='./assets/iconfont/iconfont.css' /> <script src="./plugins/js/plugin.js"></script> <script src="./luckysheet.umd.js"></script>

 

2.2} place a div in HTML as an Excel container

1 2	<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

　

In the above style, position:absolute is defined. At present, the lucky sheet will occupy all the space by default
In fact, the Save button at the bottom of the page can't be displayed
At present, my practice is to put the Save button at the top of the page.

2.3 initializing Excel

1 2 3 4 5 6 7 8 9

<script>     $(function () {         //Configuration item         var options = {             container: 'luckysheet' //luckysheet is the container id         }         luckysheet.create(options)     }) </script>

　　

In this way, an online Excel is completed.

 

　　

Lucky sheet only provides front-end operations, and data saving should be implemented by developers themselves.

 

2.4 data saving

There are two types of data saving: real-time saving and "save all". Real time saving is complex. Now we introduce a simple method to save all.

The lucky sheet provides a lucky sheet Getallsheets() method,

By calling this method, the lucky sheet system will transfer all data to you,

You can save the data in the OnClick save event on the page, and then use Jquery's Post method to receive the data and write it to the database.

The following code demonstrates how to post the lucky sheet to XLS Aspx} page

1 2 3 4 5 6 7 8

function save() {                       var data2 = luckysheet.getAllSheets();              var cnt = JSON.stringify(data2);              $.post("xls.aspx",   {                  cnt: cnt  <br><br>             });    }

　　

In XLS On the ASPX page, all data can be obtained by using {Reque["cnt"] and then saved to the database.

 

 

2.5 data restore

The loadUrl attribute is provided by the lucky sheet. After the initialization of the current end, the lucky sheet will call this attribute to load the initialization data

Therefore, using this attribute, you can restore the data saved in the database.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var options = {                   container: 'luckysheet',                   lang: 'zh',                   showinfobar: false,                    row: 20,                   column: 15,                   plugins: ['chart'],                   showstatisticBar: false,                   loadUrl: 'data.aspx?id=11', //Restore data URL                   showsheetbar: false,                   showsheetbarConfig: {                       add: false,                       menu: false,                   },

　　

 3. Data cache

(1) The lucky sheet allows you to load the JS and CSS required by the lucky sheet locally, but these JS and CSS are relatively large,

To do this, you can use link's prefetch to preload CSS and 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) When Luckysheet inserts a picture, the picture is stored in Base64 format, so the final saved data may be very large.

 

(3) You need to understand some simple concepts of Excel: an excel is composed of multiple sheets, while a Sheet is composed of multiple cells, and each Cell will include r, c and v

r: row of cell

c: column of cell

v: Cell value = value

When real-time saving is used, two-dimensional array data is transformed into one-dimensional array in {r, c, v} format. The amount of data saved in real time is small, but it is complex.

 

4. Excel data import and export

The lucky sheet provides a lucky excel, which supports the import and export of Excel.

Demonstration https://mengshukeji.gitee.io/luckyexceldemo/

 

5. Generate chart

Lucky sheet can use Echart to generate chart components (pie chart, histogram, curve, etc.).

 

 

 

This article is my remake of Kai star knowledge base http://demo.dotnetcms.org/kbase Some experience of using luckysheet.

For more details, please refer to the official website of lucky sheet https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/.