Jspreadsheet v4：JavaScript 电子表格

最新推荐文章于 2025-03-27 14:41:46 发布

allway2

最新推荐文章于 2025-03-27 14:41:46 发布

阅读量4.5k

点赞数 2

文章标签： python 开发语言后端

本文链接：https://blog.csdn.net/allway2/article/details/121457226

版权

Jexcel已重命名为Jspreadsheet。

Jspreadsheet 是一个轻量级的 vanilla javascript 插件，用于创建与其他电子表格软件兼容的令人惊叹的基于 Web 的在线交互式表格和电子表格。您可以从 JS 数组、JSON、CSV 或 XSLX 文件创建在线电子表格。您可以从 Excel 复制并直接粘贴到您的在线电子表格，反之亦然。很容易集成任何第三方 javascript 插件来创建您自己的自定义列、自定义编辑器，并将任何功能自定义到您的应用程序中。Jspreadsheet 通过其原生列类型提供了大量不同的输入选项，以涵盖最常见的基于 Web 的应用程序需求。它是一个完整的网络数据管理解决方案。使用 Jspreadsheet 创建令人惊叹的在线电子表格。

只需几个简单的步骤，您就可以将 Jspreadsheet 集成到您的应用程序中。使用这个惊人的数据交互工具，以更好的用户体验打动您的客户。

制作丰富且用户友好的 Web 界面和应用程序
您可以以用户习惯的方式轻松处理复杂的数据输入
改善您的用户软件体验
创建丰富的 CRUDS 和漂亮的 UI
与 Excel 电子表格的兼容性：用户可以使用常见的复制和粘贴快捷方式移动数据
通过简单的第三方插件集成轻松定制
精益、快速且易于使用
上千个成功用户案例
加快您在基于 Web 的软件中处理困难数据输入的工作
创建和共享惊人的在线电子表格

安装

npm install jspreadsheet-ce

或从我们的Github 官方下载

创建惊人的在线电子表格

如何在您的应用程序中嵌入一个简单的 javascript 电子表格的示例。您可以在此处查看更多示例。

	Car	Make	Available	Photo	Stock	Price	G
1	Jazz	Honda	12/02/2019			$ 2.000,00
2	Civic	Honda	11/07/2018			$ 4.000,01

<html>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
 
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
 
<div id="spreadsheet"></div>
 
<script>
var data = [
    ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
    ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];
 
jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        {
            type: 'text',
            title:'Car',
            width:90
        },
        {
            type: 'dropdown',
            title:'Make',
            width:120,
            source:[
                "Alfa Romeo",
                "Audi",
                "Bmw",
                "Chevrolet",
                "Chrystler",
                // (...)
              ]
        },
        {
            type: 'calendar',
            title:'Available',
            width:120
        },
        {
            type: 'image',
            title:'Photo',
            width:120
        },
        {
            type: 'checkbox',
            title:'Stock',
            width:80
        },
        {
            type: 'numeric',
            title:'Price',
            mask:'$ #.##,00',
            width:80,
            decimal:','
        },
        {
            type: 'color',
            width:80,
            render:'square',
        },
     ]
});
</script>
</html>