Luckysheet is an online spreadsheet like Excel that’s powerful, easy to configure, and completely open-source. This JavaScript library for creating a full-featured live spreadsheet application similar to Google Sheets.
An Easier Excel Style Spreadsheet App With Vue.js
How to make use of it:
1. Load the mandatory JavaScript and CSS information within the doc.
<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 component 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 brand new spreadsheet instance and executed it.
luckysheet.create({ container: 'luckysheet' })
5. All default configuration choices.
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: [] })
Full-feature Online Spreadsheet, Luckysheet Plugin/Github
See Demo And Download
Official Website(mengshukeji): Click Here
This superior jQuery/javascript plugin is developed by mengshukeji. For extra advanced usage, please go to the official website.
Be First to Comment