前端开源自定义报表luckysheet.js

前端开源自定义报表luckysheet.jsdemo实例代码片此处增加保存、加载、导入、导出JS功能配置参考https://mengshukeji.github.io/LuckysheetDocs/guide/<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta nam

維他命～

4213人浏览 · 2020-10-26 15:05:56

維他命～ · 2020-10-26 15:05:56 发布

前端开源自定义报表luckysheet.js

demo实例
在这里插入图片描述

代码片

此处增加保存、加载、导入、导出JS

功能配置参考
https://mengshukeji.github.io/LuckysheetDocs/guide/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
</head>
<body>
	<div>
		<div style="float: left;">
			<!-- <button onclick="load()">加载</button> -->
			<button onclick="save()">保存</button>
		</div>

		<div style="float: right;">
			<input style="font-size:16px;" type="file" id="Luckyexcel-demo-file" name="Luckyexcel-demo-file"
				change="demoHandler" />
			<button> 导入 </button>
			<button> 另存为 </button>
		</div>
	</div>
	<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 50px;bottom: 0px;">
    </div>
    
</body>
</html>
<script>
    $(function () {
        //Configuration item
        var options = {
            container: 'luckysheet', // 设定DOM容器的id
            title: '', // 设定表格名称
            lang: 'zh', // 设定表格语言
            showinfobar: false,
    
        }
       
        luckysheet.create(options)
    })
    var server = {
    ws:null,
    callbacks:{},   //消息回调函数
    init(){
        this.ws = new WebSocket("ws://127.0.0.1:11551?uname=test&pwd=123456");
        var _ws = this.ws;
        var _this = this;
        _ws.onopen = function(){
            console.log("ws 连接成功!")
            //保持连接
            setInterval(function(){
                _ws.send('ping')
            },1000 * 60)
        }
    
        _ws.onmessage = function(msg){
            msg = msg.data
            console.log('<==')
            console.log(msg)
            if('pong' == msg || '1' == msg){
                return
            }

            var msgObj = JSON.parse(msg)
            var callback = _this.callbacks[msgObj.id]
            if(callback){
                callback(msgObj.data)
            }else{
                console.log("未处理消息 msg = " + msg)
            }
        }

        _ws.onerror = function(e){
            console.warn("连接出错")
            console.warn(e)
            _ws.close()
        }

        _ws.onclose = function(){
            console.warn("连接断开")
            //setTimeout(function(){
            //    _this.init()
            //},1000)
        }
    },
    get(callback){
        var id = "id_" + Math.random()
        this.callbacks[id] = callback

        this.send({
            action:'get',
            id: id,
        })
    },
    send(msgObj){
        var msg = JSON.stringify(msgObj);
        this.ws.send(msg)
        console.log("==>")
        console.log(msg)
    },
    set(opt,callback){
        var id = "id_" + Math.random()
        this.callbacks[id] = callback

        this.send({
            action:'set',
            id: id,
            data:opt,
        })
    }
}

server.init()


/** 加载表格 */
function load() {
    server.get(function(options){
        luckysheet.destroy()
        luckysheet.create(JSON.parse(options))
        console.log("init...")
    })
}

/** 保存表格 */
function save() {
    var options = {
        title: 'TD游戏配置',
        lang: 'zh',
        container: 'luckysheet',
        showinfobar: false,
        data: [],
    }

    var luckysheetfile = luckysheet.getLuckysheetfile()
    if(!luckysheetfile) return;

    for (const index in luckysheetfile) {
        var sheet = luckysheetfile[index]
        options.data[index] = {
            name: sheet.name,
            index: index,
            column: sheet.data[0].length,
            row: sheet.data.length,
        }

        options.data[index].celldata = []
        var i = 0;
        for (const r in sheet.data) {
            for (const c in sheet.data[r]) {
                options.data[index].celldata[i++] = {
                    r: r,
                    c: c,
                    v: sheet.data[r][c]
                }
            }
        }
    }

    server.set(JSON.stringify(options),function(){
        console.log("同步成功")
    })
}
</script>