LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【JavaScript】x-spreadsheet从数据库/JSON加载数据

admin
2024年6月12日 12:30 本文热度 1021

文章目录

    • 新建一个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-2024 ClickSun All Rights Reserved