前端表格(excel) spreadjs

最新推荐文章于 2024-05-11 14:22:31 发布

Dragonfly_w

最新推荐文章于 2024-05-11 14:22:31 发布

阅读量1.1k

点赞数

分类专栏： spreadjs 文章标签： js html5 前端

本文链接：https://blog.csdn.net/Dragonfly_w/article/details/119041490

版权

spreadjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

spreadjs

大家转载，请标明出处

官网地址下载链接，请记住生产不是免费的哦，自己学习可用哦

下边我开始吧
首先是建立一个小的demo，代码如下

<!doctype html>
<html style="height:100%;font-size:14px;">

<head>
    <meta name="spreadjs culture" content="zh-cn" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/gc.spread.sheets.excel2013white.css">
    <script src="js/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="spread/gc.spread.sheets.all.11.0.0.min.js" type="text/javascript"></script>
    <script src="js/FileSaver.js" type="text/javascript"></script>
    <script src="js/gc.spread.excelio.min.js" type="text/javascript"></script>
    <script src="js/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
    <script src="js/excel_data.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
    <div class="sample-tutorial">
        <div id="ss" class="sample-spreadsheets"></div>
        <div class="options-container">
            <div class="option-row">
                <div class="inputContainer">
                    <input type="checkbox" id="incremental" checked/>
                    <label for="incremental">Incremental Loading</label>
                    
                    <p class="summary" id="loading-container">
                        Loading progress: 
                        <input style="width: 231px;" id="loadingStatus" type="range" name="points" min="0" max="100" value="0" step="0.01"/>
                    </p>
                    <input type="file" id="fileDemo" class="input">
                    <input type="button" id="loadExcel" value="import" class="button">
                </div>
                <div class="inputContainer">
                    <input id="exportFileName" value="export.xlsx" class="input">
                    <input type="button" id="saveExcel" value="export" class="button">
                </div>
            </div>
            <div class="option-row">
                <div class="group">
                    <label>Password:
                        <input type="password" id="password">
                    </label>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

上边的代码中只是引入的js和页面的模板，主要的是app.js中的数据哦，其他的js文件都在在下载的spreadjs包中找到

话不多说，撸代码，一下是app.js内容啊，如果从后台拿到数据是这样的

 const dataSource = [
        { ID:0, Name:'我', Info1:'还是我' },
        { ID:1, Name:'很', Info1:'狠人大帝' },
        { ID:2, Name:'帅', Info1:'就是我' },
      ];

开始构建前台小样

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { calcOnDemand: true});

此时出现是这样的
在这里插入图片描述

请忽略右侧的导入Excel表格功能，毕竟我们是从后台那数据展示的，当然，那部分功能也会说的，项目中用不上导入功能，可以在上边代码中删除相应的代码即可，就不会显示。
开始呈现后台数据在Excel中

/**
*SpreadJS的表单绑定是将前端获取的数据源DataSource绑定到整个表单上，由于数据源是一个二维表格形式的结构，所以将会以列为单位绑定数据源中的每一个字段，这里通过设置autoGenerateColumns 可以控制是否自动生成绑定列，下面将以自动生成和手动生成两种方式分开详细介绍
*/

var sheet = spread.getActiveSheet();

// autoGenerateColumns 设置为true时即为自动生成绑定列的模式。首先，我们假设前端接收的数据源为(数据源的获取可以为任何方式，比如常用的：ajax,getjson等等)。

sheet.autoGenerateColumns = true;
// 设置绑定模式为自动生成绑定列模式。 接下来将数据源通过setDataSource方法设置数据源给该sheet对象。

sheet.setDataSource(dataSource);

结果如下
在这里插入图片描述
此时我们会发现如果我们在这个Excel中数据我们需要的数据，例如字符串数字时会自动转换成整数，用着很不方便，还有就是一旦数据超过16位数字，包括16位，数字奇数会变成偶数，例如我输入9999999999999999，表格会给我们转换成10000000000000000，是不是很意外啊
如下：

第二行我输入的是9999999999999999，退出后以科学计数法展示
第一行我也是输入9999999999999999，再点进入，数据变成如图，数据变了，是不是很神奇

别急，有办法解决，反正我想要让它以文本形式展示，解决如下

// sheet 在上边已经获取了  你可以设置sheet 默认Style
var defaultStyle = sheet.getDefaultStyle()
defaultStyle.formatter = "@";
sheet.setDefaultStyle(defaultStyle)

查看结果如下
在这里插入图片描述
是不是很赞。
当然如果我们修改Excel中数据，我们也可以把数据从表格中拿出来

sheet.getDataSource()

展示如下
在这里插入图片描述

如果大家感觉默认的框有点不够宽可以使用 sheet.defaults.colwidth = 50
如果大家想要根据内容自动调整列宽代码如下

sheet.setDataSource(dataSource);// 这段代码后添加一个api设置
for (let i = 0; i < dataSource.length; i++) {
	sheet.autoFitColumn(i) //设置自适应列宽，随该列的最大内容变化
}

结果如下
在这里插入图片描述
补充一下

其实我们在使用的时候还有一个好玩的没有说，那就是在sheet.setDataSource(dataSource)数据之前可以增加一个sheet.name(‘狠人我要了.xlsx’)

效果如下：可与图一左下角对比，看看你们发现了没有啊
在这里插入图片描述

有时候我们可能需要在表格中设置点击事件操作如下

单击事件

spread.bind(GC.Spread.Sheets.Events.CellClick,
function(e, args) {undefined
var sheetArea = args.sheetArea === 0 ? 'sheetCorner': args.sheetArea === 1 ? 'columnHeader': args.sheetArea === 2 ? 'rowHeader': 'viewPort';
// 可以根据需求写代码
});

双击事件

sheet.bind(GC.Spread.Sheets.Events.CellDoubleClick,function(sender, args){undefined
var sheetArea = args.sheetArea === 0 ? 'sheetCorner': args.sheetArea === 1 ? 'columnHeader': args.sheetArea === 2 ? 'rowHeader': 'viewPort';
// 可以根据需求写代码
});

单元格发生变化change事件

sheet.bind(GC.Spread.Sheets.Events.ValueChanged,function(sender,args){undefined
vachange="是";
console.log(vachange);
})

就先记录这么多吧，花费类两个小时弄得。如果大家转载，请标明出处

Dragonfly_w

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端表格(excel) spreadjs

防抖函数 debounce写这篇博客是因为看了别的的博客，发现一些问题，自己记录一下
复制链接

扫一扫

专栏目录

前端表格(excel) spreadjs

spreadjs

有时候我们可能需要在表格中设置点击事件操作如下

“相关推荐”对你有帮助么？