Author: | mengshukeji |
---|---|
Views Total: | 3,488 views |
Official Page: | Go to website |
Last Update: | December 19, 2020 |
License: | MIT |
Preview:

Description:
Luckysheet is an open-source, dependency-free JavaScript library to create a full-featured, Google Sheets-like online spreadsheet app.
It allows you to manipulate tabular data just like you’re running Microsoft Excel app on the web. A full feature list can be found here.
Basic usage:
1. Load the necessary JavaScript and CSS files in the document.
<link rel="stylesheet" href="./plugins/css/pluginsCss.css" /> <link rel="stylesheet" href="./plugins/plugins.css" /> <link rel="stylesheet" href="./css/luckysheet.css" /> <script src="./plugins/js/plugin.js"></script> <script src="./luckysheet.umd.js"></script>
2. Create a container element to hold the spreadsheet.
<div id="luckysheet"></div>
3. Make the spreadsheet fullscreen.
#luckysheet { margin: 0px; padding: 0px; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; }
4. Create a new spreadsheet instance and done.
luckysheet.create({ container: 'luckysheet' })
5. All default configuration options.
luckysheet.create({ // container ID container: "luckysheet", // number of columns column: 60, // number or rows row: 84, // enables copy to clipboard allowCopy: true, // shows toolbar showtoolbar: true, // shows top bar showinfobar: true, // shows bottom sheet bar showsheetbar: true, // shows statistic bar showstatisticBar: true, // table options pointEdit: false, pointEditUpdate: null, pointEditZoom: 1, // default data data: [{ "name": "Sheet1", color: "", "status": "1", "order": "0", "data": [], "config": {}, "index":0 }, { "name": "Sheet2", color: "", "status": "0", "order": "1", "data": [], "config": {}, "index":1 }, { "name": "Sheet3", color: "", "status": "0", "order": "2", "data": [], "config": {}, "index":2 }], // speadsheet title title: "Luckysheet Demo", // user info userInfo: ' rabbit', // popup menu items userMenuItem: [{url:"www.baidu.com", "icon":'', "name":"My Sheet"}, {url:"www.baidu.com", "icon":'', "name":"Exit"}] // back button URL myFolderUrl: "www.baidu.com", // configs of cell height, width, formula, etc. config: {}, // fullscreen mode fullscreenmode: true, // device pixel ratio devicePixelRatio: window.devicePixelRatio, // allows the user to edit allowEdit: true, // load data via AJAX loadUrl: "", loadSheetUrl: "", // unique ID gridKey: "", // update URL updateUrl: "", // image url updateImageUrl: "", // allows to update on the back end allowUpdate: false, // function buttons functionButton: "", showConfigWindowResize: true, // enables add row enableAddRow: true, // enables add column enableAddCol: true, // enables load the next page enablePage: false, // auto format numbers autoFormatw: false, // "0" or 0 accuracy: undefined, pageInfo:{ 'queryExps':'', 'reportId':'', 'fields':'', 'mobile':'', 'frezon':'', 'currentPage':'', "totalPage":10, "pageUrl":"", }, // is edit mode editMode: false, // custom functions chartConfigChange: null, beforeCreateDom: null, fireMousedown: null, // language lang: 'en', //plugins, e.g. ['chart'] plugins: [] })
6. For advanced usage, check out the documentation site for information.
Changelog:
v2.1.11 (12/19/2020)
- Bug Fixes
v2.1.7 (12/03/2020)
- Update
v2.1.0 (10/11/2020)
- Lots of features added
- Bugs fixed