如何使用前端表格控件实现数据更新?

前言

小编之前分享过一篇文章叫《如何使用前端表格控件实现多数据源整合?》。今天,继续为大家介绍如何使用前端表格控件来更新已连接的数据源信息。

环境准备

SpreadJS在线表格编辑器:

SpreadJS 前端表格控件新版本新增了一款报表插件,该插件基于 SpreadJS 本身强大的表格能力,在 DataManager 数据关系引擎的助力下,全新的报表插件让报表和数据录入用户有了全新的能力和体验,快速完成报表和数据录入功能的搭建,相对之前,能节省大量的开发成本,此外,报表 还支持数据输入、分页、数据筛选、排序、条件格式化等功能。

一、设置数据源

设置数据源方式有三种:远程数据源、本地数据源、本地json文件,详细内容可以参考上一篇文章《如何使用前端表格控件实现多数据源整合?》

二、更新数据源

目前,SpreadJS支持两种方式更新数据源,分别是AutoSync和Batch模式。

上一篇系列文章介绍过通过addTable接口的remote、schema、data属性实现数据源的添加url数据源,这篇文章小编将继续介绍如何通过addTable接口的autoSync和batch属性别设置自动同步模式和批量处理模式。

1. 自动同步autoSync

这种模式主要适用于低频的数据操作场景。

1.1 接口准备

首先设置一个数据源:

let studentList = [{id: 1, name: "张三", age: 7, sex: '男'},{id: 2, name: "李四", age: 8, sex: '女'},{id: 3, name: "小王", age: 7, sex: '男'},{id: 4, name: "小韩", age: 8,sex: '女'},{id: 5, name: "小明", age: 7, sex: '男'},
];

对应的 NodeJS 后端接口数据为:

//读取
app.get("/student", (req, res) => {res.json(studentList);});
//新增
app.post("/student", (req, res) => {let item = req.body;studentList.push(item)res.json(item);
});
//修改
app.put("/student", (req, res) => {let info = req.body;studentList.forEach((item, index) => {if (item.id === info.id) {studentList[index] = info}})res.json(info);
});
//删除
app.delete("/student", (req, res) => {let info = req.body && req.body[0];studentList.forEach((item, index) => {if (item.id === info.id) {studentList.splice(index, 1)}})res.json({succeed: true});
});

1.2 数据源设置

其中autoSync表示在自动同步模式下,数据更改将同步到服务器,此时在remote中设置增删改数据的接口,如下代码所示:

  spread.dataManager().addTable('student', {autoSync:true,remote: {read: {method: 'get', url: 'http://localhost:3000/student'},create: {method: 'post', url: 'http://localhost:3000/student'},update: {method: 'put', url: 'http://localhost:3000/student'},delete: {method: 'delete', url: 'http://localhost:3000/student'}}});

通过上述代码,我们设置了四个http请求,分别对应read读取,create新增,update修改,delete删除的接口。

上面是通过代码的方式设置,那么如何通过 UI 的方式设置?

具体操作方式可以如下图所示:

打开SpreadJS在线表格编辑器,点击”数据“->“数据源”,选择表名,勾选自动同步,【读取】、【创建】、【删除】和【批量处理】分别代表代码中的read读取,create新增,update修改和delete删除。

1.3 创建报表

设置好数据后,我们来创建一个学生报表,如下动图所示:
在这里插入图片描述

通过上图,我们可以利用向导快速创建一个模板,当然也可以导入Excel/sjs模板:

创建好报表后,我们进行填报设置。

1.4 填报设置

按上图所示,先点击“填报设置”,在弹窗中点击“添加”按钮,接下来选择数据源 table 表,然后点击“智能添加字段” ,最后选择 id 为主键。

1.5 数据填报

在填报设置好之后,我们就可以进行数据填报了

1.5.1 修改

将张三的年龄改为30 ,修改后发现左上角有红色标记,用来标脏。右键点击“提交”。

成功修改后,发现红色标记消失,同时在控制台中发现调用了学生修改接口,且接口返回200。

此时去查询学生列表,张三的年龄已被修改

1.5.2 新增/删除

注意,新增的时候要为id设置一个默认值=SJS.UUID()

在这里插入图片描述

接下来的操作可以看下面的动图

至此,我们就完成了学生表的基本数据填报工作。

这时候,有小伙伴就会问,那如果想要批量对数据更新呢,没有关系,我们有批处理模式

2. 批量处理batch

这种模式主要适用于数据经常被操作的场景。它将按顺序存储每一行的操作,然后将所有的修改打包成一个集合,一次性发送到服务器,以节省网络资源。

2.1 接口准备

同样,我们在nodejs服务中,设置一个批处理的接口,还是再来看下这张图

student.post("/student/batchUpdate", (req, res) => {let obj = []const resultArray = req.bodyresultArray.forEach((item, index) => {obj[index] = {"succeed": true}if (item.type === 'update') {let _index = item.sourceIndexstudentList[_index] = item.dataItem} else if (item.type === 'insert') {studentList.push(item.dataItem)obj[index].data = item.dataItem} else if (item.type === 'delete') {let _index = item.sourceIndexstudentList.splice(_index, 1)}})res.json(obj);
});

上面的代码表示根据返回的数据类型,做相应的操作,如果是新增,需要返回新增的数据。

2.2 数据源设置

batch表示在批处理模式下,数据更改将保留在数据源中,此时在remote中批处理的接口,如下代码所示:

     let studentTable = spread.dataManager().addTable('student', {batch:true,remote: {read: {method: 'get', url: 'http://localhost:3000/student'},batch:{method: 'post', url: 'http://localhost:3000/student/batchUpdate'}}});

那么UI上怎么设置呢?

2.3 创建报表/填报设置

操作方法和上一步【数据源设置】一致。

2.4 数据填报

总结

以上就是使用前端表格控件实现数据更新的全过程,如果您想了解更多信息,欢迎点击这里查看。

扩展链接:

【干货放送】财务报表勾稽分析要点,一文读尽!

为什么你的财务报表不出色?推荐你了解这四个设计要点和!

纯前端类 Excel 表格控件在报表勾稽分析领域的应用场景解析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/26185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python altair库:轻松打造高颜值数据可视化图表

更多Python学习内容:ipengtao.com Altair是一个基于Vega和Vega-Lite构建的Python数据可视化库。它提供了一个简单且直观的API,能够生成具有交互性的统计图表。Altair的设计理念是通过声明式的语法定义图表,从而简化了复杂图表的创建过程。本文…

VUE脚手架更新

用vue命令创建命令时发现提示需要更新vue-cli 卸载原脚手架 npm uninstall vue-cli -g 升级 npm install -g vue/cli 检查版本 vue -V 注意是大写的v

【PowerDesigner】创建和管理CDM之新建和使用域

目录 🌊1. PowerDesigner简介 🌍1.1 常用模型文件 🌍1.2 PowerDesigner使用环境 🌊2. 创建和管理CDM 🌍​​​​​​2.1 新建CDM 🌍2.2 新建和使用域 🌊3. 研究心得 🌊1. Pow…

pxe自动装机:

pxe自动装机: 服务端和客户端 pxe c/s模式,允许客户端通过网络从远程服务器(服务端)下载引导镜像,加载安装文件,实现自动化安装操作系统。 无人值守 无人值守,就是安装选项不需要人为干预&am…

最全面又最浅显易懂的Langchain快速上手教程(下)

最全面又最浅显易懂的Langchain快速上手教程(下) 三. 深入Langchain 1. 架构设计 从上文知道Langchain在架构上使用了从抽象、到具体、再到整合适配的三层架构,这种一层一层逐渐具体的设计最大可能性的保证了架构的可扩展性和维护性。同时…

【Vue】封装api接口 - 图片验证码接口

**1.目标:**将请求封装成方法,统一存放到 api 模块,与页面分离 2.原因:以前的模式 页面中充斥着请求代码 可阅读性不高 相同的请求没有复用请求没有统一管理 3.期望: 请求与页面逻辑分离相同的请求可以直接复用请求…

17个有用的CLI命令

作为前端开发工程师,我们需要了解哪些命令?如果您熟悉这些命令,它们将大大提高您的工作效率。 1. tree 你们知道如何列出一个目录的文件结构吗?它在显示文件之间的目录关系方面做得很好 commands ├── a.js ├── b.js ├── …

NOS II - Timer定时器

NOS II-Time定时器 简单回忆NIOS II中定时器的使用。 一、定时器的框图 二、定时器寄存器的描述 定时器的寄存器都是16bit的, 偏移量寄存器名称R/W15bit…4bit3bit2bit1bit0bit0Status - 状态寄存器R/W - 可读可写*****runTO1Control - 控制寄存器R/W***stopsta…

2024年高考作文考人工智能,人工智能写作文能否得高分

前言 众所周知,今年全国一卷考的是人工智能,那么,我们来测试一下,国内几家厉害的人工智能他们的作答情况,以及能取得多少高分呢。由于篇幅有限,我这里只测试一个高考真题,我们这里用百度的文心…

【最新鸿蒙应用开发】——总结ArkUI生命周期

鸿蒙ArkUI相关的生命周期都有哪些? 1. UIAbility生命周期 onCreate、onWindowStageCreate、onForeground、onBackground、onWindowStageDestroy、onDestroy。 onCreate:Create状态为在应用加载过程中,UIAbility实例创建完成时触发,系统会调…

Spring Boot 分片上传、断点续传、大文件上传、秒传,应有尽有

文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,…

APP需要做等保吗?

在数字化时代,APP已成为我们生活中不可或缺的一部分,它们如同无形的桥梁,连接着现实世界与虚拟世界,为我们提供了前所未有的便利。然而,随着APP的普及,其背后潜藏的安全风险也日益凸显。近年来,…

Java面向对象-Object类的toString方法、equals方法

Java面向对象-Object类的toString方法、equals方法 一、toString二、equals三、总结 一、toString Object的toString方法。 方法的原理: 现在使用toString方法的时候,打印出来的内容不友好。 现在想要知道对象的信息。 出现的问题:子类Stu…

Hbase布隆过滤器

Hbase布隆过滤器 说在前面 重要思想: 1.时间换空间:降低内存使用率 --> 降低数据查询时间 2.空间换时间:提高数据查询速率 --> 保存在内存中

2024北京通信展:聚焦新一代信息通信技术、产品、应用及解决方案

中国国际信息通信展览会(PTEXPO)作为工业和信息化部主办的ICT行业盛会,自1990年创办以来,已走过了三十多年的辉煌历程。三十余载光阴荏苒,PT展以其独特的魅力,不仅成为反映信息通信行业发展新成果的重要窗口…

基于GA遗传算法的多机无源定位系统GDOP优化matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于GA遗传算法的多机无源定位系统GDOP优化matlab仿真。仿真输出GDOP优化结果,遗传算法的优化收敛曲线以及三维空间坐标点。 2.测试软件版本以及运行…

SpringBoot的事务注解

SpringBoot的事务注解 在Spring Boot应用中,事务管理是一个关键的部分,尤其是当涉及到数据库操作时。Spring Boot提供了强大的事务管理支持,使得开发人员可以通过简单的注解来控制事务的边界和行为。本文将介绍如何在Spring Boot中使用事务注…

传感器技术

传感器技术 传感器概述传感器简介传感器的特性线性度灵敏度迟滞重复性传感器的动态特性 步进电动机步进电机的工作原理 传感器概述 传感器简介 传感器:能够感受被测量并按照一定规律转换成可用输出信号的器件或装置。 敏感元件:传感器中能直接感受或响…

Nodejs 第七十六章(MQ进阶)

MQ介绍和基本使用在上一章介绍过了,不再重复 消息:在RabbitMQ中,消息是传递的基本单元。它由消息体和可选的属性组成 生产者Producer:生产者是消息的发送方,它将消息发送到RabbitMQ的交换器(Exchange&…

3 数据类型、运算符与表达式-3.5 字符型数据-3.5.2 转义字符

3.5.2 转义字符 #include <stdio.h>main() {int a, b, c;a 5;b 6;c 7;printf("ab c\tde\rf\n");printf("hijk\tL\bM\n");return 0; }