狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【JavaScript】x-spreadsheet從數據庫/JSON加載數據

admin
2024年6月12日 12:30 本文熱度 1097

文章目錄

    • 新建一個flask項目

    • 使用

    • 從數據庫讀取數據解析為表格

    • 在flask中使用xspread-sheet

項目地址:link

使用

一個最簡單的demo,只用一個html,不需要任何其它配置

<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/xspreadsheet.css">

<script src="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/xspreadsheet.js"></script>

<script src="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/locale/zh-cn.js"></script>

<div id="x-spreadsheet-demo">

  <script>

    x_spreadsheet.locale('zh-cn');  //中文

    var htmlout = document.getElementById('x-spreadsheet-demo')

    var xs = x_spreadsheet(htmlout

  </script>

</body>

</div>

現在的問題是如何把插件加載json數據,以及處理保存的問題。數據導出成excel應該沒問題。

在npm中使用

作者說不推薦,放棄

導入和導出

作者給的例子是另一個項目里的:link

這個例子下載后在win上有bug:

  1. index.html第45,46行,引用的兩個文件是鏈接,在win是不生效的,手動下載這兩個文件

  2. index.html 第55行,var xspr = x.spreadsheet(HTMLOUT),變量x未定義,改成x_spreadsheet(HTMLOUT)

改了之后就,瀏覽器打開index.html后就可以使用了,效果還不錯。導出之后會丟失所有格式。

從數據庫讀取數據解析為表格

先看一個加載json的例子

<link rel="stylesheet"

    href="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/xspreadsheet.css">

<script src="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/xspreadsheet.js"></script>

<script src="https://unpkg.com/x-data-spreadsheet@1.1.1/dist/locale/zh-cn.js"></script>

<div id="x-spreadsheet-demo">

    <script>

        x_spreadsheet.locale('zh-cn');  //中文

        var htmlout = document.getElementById('x-spreadsheet-demo')

        data = [{

    "name":"Sheet1","freeze":"A1","styles":[],"merges":[],

        "rows":{

    

            "0":{

    "cells":{

    "0":{

    "text":"id"},"1":{

    "text":"name"}}},

            "1":{

    "cells":{

    "0":{

    "text":"1"},"1":{

    "text":"Tom"}}},

            "2":{

    "cells":{

    "0":{

    "text":"2"},"1":{

    "text":"Hall"}}},

            "3":{

    "cells":{

    "0":{

    "text":"3"},"1":{

    "text":"Sure"}}},

            "len":5},

            "cols":{

    "len":6},

            "validations":[],

            "autofilter":{

    }}]

        var xs = x_spreadsheet(htmlout).loadData(data)

        console.log("表格返回的數據為:\n", xs.getData())  // getData得到一個object對象,要把它轉為json用JSON.stringify()

        console.log("json字符串格式為:\n", JSON.stringify(xs.getData()))

    </script>

</div>

上面的例子中,各出的json格式和從數據庫拿到的不一樣,所以我們如果想把從數據庫拿出的直接json樣式展示出來,需要自己寫一個轉換函數。這個在后端還是前端都可以,我們就在后端完成這個工作。

假設由數據庫得到一個df對象,現在把它拼接成這種形式的json字符串。

  • 我們發現json中指定的行和列,如果新增行列是在前面加,所以指定的時候就比數據庫的數據多一行一列。

現在用 python 來實現格式轉換:
dataframe -> dict -> dict2 -> list
dict2的格式

 

這是一個四維字典,用:

dict2['0']['cells']['0']['text']

可以訪問到 第一個數據,這里就是 id, 但實際上數據是二維的,二四維是固定的‘cells’和’text’。

方案一:直接用字符串拼接

def df2xspreadsheetjson(df) -> str:    '''
    df對象轉為 x-spreadsheet格式的json字符串
    :param df: 從數據庫得到的dataframe
    :return: str
    '''
    cols = []    # 重命名標題行,主要考慮標題行空等情況    for col in df.columns:        if col == "":
            cols.append("N/A")  # 標題行空,一般不可能        elif col 

該文章在 2024/6/12 12:31:21 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved