在線電子表格編輯器 Luckysheet

原創 馬昌偉 2022-12-02 14:14

 

下載地址

不知道地址正不正經，我先用着，網上找的地址，不知道是不是可信任的，疑似官網的兩個地址都打不開，

https://github.com/dream-num/Luckysheet

 

zip包  https://codeload.github.com/dream-num/Luckysheet/zip/refs/heads/master

或者克隆 

別人是這裏下載的，好像是官網之一，打不開

 這裏有學習文檔 ：https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/#%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%BB%8D

 

引用方法

在提交PR之前，請確保仔細閱讀 貢獻指南。

用法

第一步

通過CDN引入依賴

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

第二步

指定一個表格容器

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

第三步

創建一個表格

<script>
    $(function () {
        //配置項
        var options = {
            container: 'luckysheet' //luckysheet爲容器id
        }
        luckysheet.create(options)
    })
</script>

引用效果

如果不添加其它的，它是整個瀏覽器全屏顯示

 

 我找了是把它放在其它div下，非全屏，必須得加高度，不然顯示不出來單元格

 

 

 body下沒設置其它div,是這樣的全屏效果

 離線部署獲得dist文件

yum install npm

# 拉取代碼，我是下載的zip包安裝的，這個地址不知道是不是官網的，好像不是
git clone https://github.com/mengshukeji/Luckysheet.git

# 安裝
cd Luckysheet-master
npm install
npm install gulp -g

# 運行
npm run build

[root@mcw01 Luckysheet-master]# ls
CHANGELOG.md  commitlint.config.js  deploy.bat  dist  docs  gulpfile.js  LICENSE  node_modules  package.json  package-lock.json  README.md  README-zh.md  src  yarn.lock
[root@mcw01 Luckysheet-master]# ls dist/
assets  css  demoData  expendPlugins  fonts  index.html  luckysheet.umd.js  luckysheet.umd.js.map  plugins
[root@mcw01 Luckysheet-master]# tar zcf mytable.tar.gz dist
[root@mcw01 Luckysheet-master]# ls
CHANGELOG.md  commitlint.config.js  deploy.bat  dist  docs  gulpfile.js  LICENSE  mytable.tar.gz  node_modules  package.json  package-lock.json  README.md  README-zh.md  src  yarn.lock
[root@mcw01 Luckysheet-master]#

把生成的dist放到代碼下面，我這裏只是單純的隨便放的，然後把你網頁的靜態文件地址改成當前文件dist下的靜態文件

 

 沒問題，正常使用，是用的本地文件。不是請求的網上的文件了

 

 引用方法同上

我修改的引用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link rel='stylesheet' href='./dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./dist/plugins/plugins.css' />
<link rel='stylesheet' href='./dist/css/luckysheet.css' />
<link rel='stylesheet' href='./dist/assets/iconfont/iconfont.css' />
<script src="./dist/plugins/js/plugin.js"></script>
<script src="./dist/luckysheet.umd.js"></script>
</head>
<body>
<div>
    <div style="height: 40px;background-color: green;"></div>
    <div>
        <div style="float:left;width: 29.5%;height: 1000px;background-color: blue;"></div>
        <div style="float:right;width: 70%;height: 1000px;background-color: yellowgreen;">
            <div id="luckysheet" style="margin:0px;padding:0px;width:100%;height:100%;left: 20px;top: 48px;"></div>

        </div>
    </div>
</div>

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

 表格和後端數據庫做交互

總的代碼

test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link rel='stylesheet' href='/static/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='/static/dist/plugins/plugins.css' />
<link rel='stylesheet' href='/static/dist/css/luckysheet.css' />
<link rel='stylesheet' href='/static/dist/assets/iconfont/iconfont.css' />
<script src="/static/dist/plugins/js/plugin.js"></script>
<script src="/static/dist/luckysheet.umd.js"></script>
</head>
<body>


{#<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>#}
   <a class="btn btn-primary btn-rounded btn-sm" onclick="saveData()"><i class="fa fa-save"></i>&nbsp;&nbsp;<@ctx.i18n text = "保存數據"/></a>
    <div id="luckysheet" style="margin-top:48px;padding:0px;position:absolute;width:100%;height:90%;left: 0px;top: 0px;">
    </div>


</body>
<script>

$(function () {
        var options = {
            container: 'luckysheet',
            title: '工作彙報',
            lang: 'zh',
            showsheetbar:false,
            data: [
                {
                    "name": "進度填報表",
                    "status": 1,
                     "celldata": [{"r":0,"c":0,"v":{"m":"dd","ct":{"fa":"General","t":"g"},"v":"dd"}},{"r":0,"c":1,"v":{"m":"dd","ct":{"fa":"General","t":"g"},"v":"dd"}},{"r":0,"c":2,"v":{"m":"b","ct":{"fa":"General","t":"g"},"v":"b"}}]
                }
            ]
        }
        luckysheet.create(options);
    })

    function saveData()
    {
        var celldata = (JSON.stringify(luckysheet.transToCellData(luckysheet.getLuckysheetfile()[0].data)));
        $.ajax({
            url:"http://127.0.0.1:5000/article/mcw",
            data:{"sheetData":celldata,"scheId":0},
            Type:"post",
            dataType:"json",
            success:function(res) {
                console.log(res);
            }
        });
    }

</script>
</html>

視圖函數

@article_bp1.route('/testmytb', methods=['POST', 'GET'])
def testmytb():
        return render_template('test.html')


@article_bp1.route('/mcw', methods=['POST', 'GET'])
def testmytb1():
    print(request.args)
    return ''

從數據庫中獲取數據並渲染在表格中

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


$(function () {
        var options = {
            container: 'luckysheet',
            title: '工作彙報',
            lang: 'zh',
            showsheetbar:false,
            data: [
                {
                    "name": "進度填報表",
                    "status": 1,
                     "celldata": [{"r":0,"c":0,"v":{"m":"dd","ct":{"fa":"General","t":"g"},"v":"dd"}},{"r":0,"c":1,"v":{"m":"dd","ct":{"fa":"General","t":"g"},"v":"dd"}},{"r":0,"c":2,"v":{"m":"b","ct":{"fa":"General","t":"g"},"v":"b"}}]
                }
            ]
        }
        luckysheet.create(options);
    })

    }

單元格數據結構如下：

分析：

  • title: '工作彙報',可以指的工作簿名稱；
  • 我們指定了表名但是沒有出來  "name": "進度填報表"；
  • 在數據裏存放的應該是工作表列表，這裏只放了一個進度填報表，雖然表名字沒有出來。單元格數據用如下格式存放到單元格數據裏面。也就是我們可以在後端將數據查出來然後存放到這裏，然後前端頁面就能看到後端傳遞渲染的數據
  • 單元格數據裏放的是單元格列表，單元格的值是v下面的v裏面
[{
    "r": 0, "c": 0, 
    "v": {"m": "dd", 
          "ct": {"fa": "General", "t": "g"}, 
          "v": "dd"}
  },
 {"r": 0, "c": 1, "v": {"m": "dd", "ct": {"fa": "General", "t": "g"}, "v": "dd"}},
 {"r": 0, "c": 2, "v": {"m": "b", "ct": {"fa": "General", "t": "g"}, "v": "b"}}]

效果如下圖

將表格數據傳遞給後端保存到數據庫中

現象：

在前端輸入數據，點擊保存按鈕

 後段能在拼接的工作表數據裏面獲取到單元格數據

 

 再看看下代碼

  • 在某個地方定義一個保存按鈕，並給保存按鈕綁定保存點擊事件的函數
  • 當點擊保存數據按鈕時，觸發執行函數，會獲取到單元格數據，然後發送ajax請求，這裏是post請求，但是我們將單元格數據和表id放到data參數下，它們會以？和&符號拼接到url後面，作爲args參數，
  • 後端需要從args中獲取到這兩個值，其中一個就是單元格數據，這樣我們就可以保存到數據庫中了。這個url也可以不用寫ip端口的

 

  <a class="btn btn-primary btn-rounded btn-sm" onclick="saveData()"><i class="fa fa-save"></i>&nbsp;&nbsp;<@ctx.i18n text = "保存數據"/></a>


$(function () {

    function saveData()
    {
        var celldata = (JSON.stringify(luckysheet.transToCellData(luckysheet.getLuckysheetfile()[0].data)));
        $.ajax({
            url:"http://127.0.0.1:5000/article/mcw",
            data:{"sheetData":celldata,"scheId":0},
            Type:"post",
            dataType:"json",
            success:function(res) {
                console.log(res);
            }
        });
    }
  • 我們再研究一下，當點擊保存後，會將單元格中的數據按如下格式發送到請求的url。然後它對應的視圖函數可以從args中獲取sheetData參數的值，也就是保存的單元格數據。數據裏面有兩個都顯示了單元格內容。
  • 由行數，列數和圖片中數據填寫位置得知，r就是行索引，c就是列索引，v就是就是value,value下面還有其它信息，v下面的m和v是單元格的具體內容，可能用v更好點吧。
  • 也就是我們從args中獲取到這個數據，就可以保存到數據庫了，
  • 由保存數據和渲染數據可以看出，二者數據結構基本差不多，那麼是不是就可以直接將表格數據json存入到數據庫，然後讀取的時候直接從數據庫讀取渲染呢。回頭驗證
[{"r": 0, "c": 0, "v": {"m": "dd", "ct": {"fa": "General", "t": "g"}, "v": "dd"}},
 {"r": 0, "c": 1, "v": {"m": "dd", "ct": {"fa": "General", "t": "g"}, "v": "dd"}},
 {"r": 0, "c": 2, "v": {"m": "b", "ct": {"fa": "General", "t": "g"}, "v": "b"}}, 
 {"r": 1,"c": 1, "v": {"m": "小馬","ct": {"fa": "General", "t": "g"}, "v": "小馬"}}]

 在線表格中元素增刪改，樣式修改

這些修改我是放在跟options一起的函數裏面，創建表後面才生效的，放在這這個function之外一直沒生效。放在裏面添加標籤和修改樣式都是生效的

 

對在線表格保存數據和渲染數據的實操案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link rel='stylesheet' href='/static/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='/static/dist/plugins/plugins.css' />
<link rel='stylesheet' href='/static/dist/css/luckysheet.css' />
<link rel='stylesheet' href='/static/dist/assets/iconfont/iconfont.css' />
<script src="/static/dist/plugins/js/plugin.js"></script>
<script src="/static/dist/luckysheet.umd.js"></script>
</head>
<body>



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


</body>
<script>

$(function () {
        var options = {
            container: 'luckysheet',
            title: '工作彙報',
            lang: 'zh',
            showsheetbar:false,
            data: [
                {
                    "name": "進度填報表",
                    "status": 1,
                     "celldata": {{ cellData.content |safe}},//[{"r":0,"c":0,"v":{"m":"dd","ct":{"fa":"General","t":"g"},"v":"dd"}},{"r":0,"c":1,"v":{"m":"dd","ct":{"fa":"General","t":"g"},"v":"dd"}},{"r":0,"c":2,"v":{"m":"b","ct":{"fa":"General","t":"g"},"v":"b"}}]
                }
            ]
        }
        luckysheet.create(options);

 $('.sheet-name').append('<a class="btn btn-primary btn-rounded btn-sm" onclick="saveData()"><i class="fa fa-save"></i>&nbsp;&nbsp;保存數據</a>');
         var mytitle=$('.luckysheet-share-logo').attr('title')
        console.log(mytitle);

    })



function saveData()
    {
        var celldata = (JSON.stringify(luckysheet.transToCellData(luckysheet.getLuckysheetfile()[0].data)));
        var mytitle=$('.luckysheet-share-logo').attr('title')
        console.log(mytitle);
        $.ajax({
            url:"/machangwei",
            data:{"sheetData":celldata,"scheId":0,"title":mytitle},
            Type:"post",
            dataType:"json",
            success:function(res) {
                console.log(res);
            }
        });
    }

</script>
</html>
test.html
from flask import Blueprint,request, render_template, redirect
from apps.onlinetable.models import Mysheet
from ext import db

table_bp=Blueprint('table',__name__)

@table_bp.route('/', methods=['POST', 'GET'])
def testmytb():
    cellData=Mysheet.query.first()
    print(cellData.content)
    return render_template('test.html',cellData=cellData)


@table_bp.route('/machangwei', methods=['POST', 'GET'])
def testmytb1():

    print(request.args)
    sheetData = request.args.get('sheetData')
    title = request.args.get('title')
    sd=Mysheet.query.filter(Mysheet.title==title).first()
    if not sd:
        sd=Mysheet()
    # print(sd)
    sd.title=title
    sd.content=sheetData
    db.session.add(sd)
    db.session.commit()
    return ''
藍圖
# ORM   類 ----》 表
# 類對象  ---〉表中的一條記錄
from datetime import datetime
from ext import db
# create table user(id int primarykey auto_increment,username varchar(20) not null,..)
class Mysheet(db.Model):
    # db.Column(類型，約束)  映射表中的列
    #
    '''
    類型：
    db.Integer      int
    db.String(15)   varchar(15)
    db.Datetime     datetime

    '''
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    title=db.Column(db.String(100), nullable=False,default='馬昌偉')
    content = db.Column(db.Text(5000), nullable=False)
    rdatetime = db.Column(db.DateTime, default=datetime.now)
    def __str__(self):
        return self.title
models.py

不加safe

 

 渲染會有問題

 

 加上safe。正常渲染

 

 

 添加數據，點擊保存

 

 數據庫中有相同標題的，就是修改數據，如果沒就是創建數據

 

 其它頁面訪問，可以訪問到。會從數據庫中將數據渲染到前端，但是我剛剛調整的單元格寬度並沒有保存上

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

即刻放大鏡。跟隨鼠標，屏幕任意位置放大

特徵：支持熱鍵放大位置跟隨縮放比例隨時調整高亮放大鏡區域記住上一次設定     操作說明：啓動程序，托盤顯示圖標Ctrl+Q熱鍵開啓放大鏡放大位置跟隨鼠標移動鼠標滾輪調整縮放比例   常見問題：視頻播放的時候能否實時放大不支持。放大期間，

5imetro 2024-04-19 14:35:10

GPG4win 加解密使用筆記

簡介： Gpg4win是一套文件或email加密解密的安全方案。 Gpg4win - a secure solution for file and email encryption. Gpg4win (GNU Privacy Guard f

zdleek 2024-04-19 14:33:30

視頻講解如何構建surging微服務調用

       surging 是一款優秀的微服務引擎，包括了社區版，標準版，異構版，平臺版本來解決公司的業務場景需求，如果你是初學者，或者是技術狂熱者，社區版完全可以符合你們的要求來學習或者構建起微服務體系的引擎框架，如果你沒信心去把控構建

fanly11 2024-04-19 14:32:59

【面試準備】項目經驗——接口自動化項目

Java junit 項目的接口就很簡單，只支持本地運行，結構就是這樣了。 REST_TEMPLATES    

金大鑫要堅持 2024-04-19 14:29:29

【面試準備】【SQL】數據庫有哪些約束？

數據庫中的約束（constraints）是用來確保數據庫中數據的準確性和可靠性的一種規則。以下是一些常見的數據庫約束： PRIMARY KEY（主鍵）：確保列的值是唯一的，並且不能爲NULL。 FOREIGN KEY（外鍵）：用於在

金大鑫要堅持 2024-04-19 14:29:29

【面試準備】跨域問題解決方法

跨域是什麼 瀏覽器對於javascript的同源策略的限制，是一種安全策略 舉例：用戶登陸某個網站後，服務器在客戶端寫了一些cookie，如果cookie被其他網站讀取，那麼隱私信息就會泄漏，包含用戶的登錄狀態等。 跨域情況說明： 域名不

金大鑫要堅持 2024-04-19 14:29:29

遞歸處理複製變量目錄按原路徑複製到新目錄的腳本

  腳本如下:   1 # coding: utf-8 2 3 """ 4 該腳本主要做把源目錄下所有文件，照搬原路徑基礎上覆制文件 5 """ 6 7 import os 8 # import shutil

fengzao 2024-04-19 14:26:19

我的個人博客上線開源啦，歡迎圍觀！

博客地址：https://yanyunfeng.com 其實很早就有開發一個自己個人博客的想法，但是一直沒有付諸行動，如今大家能看到這篇文章，說明我的博客終於是上線啦，撒花～～ 在開發這個博客之前，我都是在各大平臺上寫些東西，但是吧，平臺規

imilar 2024-04-19 14:23:08

golang開發 深入理解 context

context的歷史 context包在Go 1.7版本正式加入Go標準庫。在加入之前我們看看Go團隊核心成員Sameer Ajmani在2014年發表的一篇關於context介紹博客，地址：https://go.dev/blog/cont

飛翔碼農 2024-04-19 14:22:38

南方公園完整破碎

被魅惑了,就用自己人打一下自己即可解除. 手機女俠大招和減防攻擊很好用.

張博的博客 2024-04-19 14:20:58

BGE M3-Embedding 模型介紹

BGE M3-Embedding來自BAAI和中國科學技術大學，是BAAI開源的模型。相關論文在https://arxiv.org/abs/2402.03216，論文提出了一種新的embedding模型，稱爲M3-Embedding，它在多

JadePeng 2024-04-19 14:20:18

【百川大模型】RediSearch在python中的應用場景

[本文出自天外歸雲的博客園] RediSearch是一個非常強大的全文搜索引擎，它可以與Python一起使用，爲你的應用程序提供快速的搜索能力。以下是一些使用RediSearch的場景示例： 場景一：商品搜索 假設你正在開發一個電子商務網站

天外歸雲 2024-04-19 14:16:58

CXF WebService wsdl2java

下載 apache-cxf-3.3.1 並解壓 到bin 目錄下，輸入生成命令 wsdl2java -encoding utf-8 -d D:\Software\Webservice\ws http://XXX.XXX.XXX.XXX:X

阿 軍 2024-04-19 14:15:57

keycloak~jwt的rs256簽名的驗證方式

接口地址 keycloak開放接口地址：/auth/realms/fabao/.well-known/openid-configuration rsa算法相關術語 RSA算法是一種非對稱加密算法，其安全性基於大整數分解的困難性。在RS

張佔嶺 2024-04-19 14:13:27

通過Java修改consul配置（保留註釋、保留縮進）

          　　直接上代碼了，找了很久也沒找到保留註釋的三方包，snakeyaml 的縮進一直也有問題，就自己寫了個正則方式的 　　consul也沒有相關接口，只接受整個的 　　傳key和value，替換相應value值， 　　大佬

唯心、tt 2024-04-19 14:08:07