在線電子表格編輯器 Luckysheet

 

下載地址

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

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/[email protected]/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

[[email protected] 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
[[email protected] Luckysheet-master]# ls dist/
assets  css  demoData  expendPlugins  fonts  index.html  luckysheet.umd.js  luckysheet.umd.js.map  plugins
[[email protected] Luckysheet-master]# tar zcf mytable.tar.gz dist
[[email protected] 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
[[email protected] 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。正常渲染

 

 

 添加數據,點擊保存

 

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

 

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

 

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