报表插件（ReportSheet) 实现数据填报功能

数据填报功能，主要是对用户数据的一个修改。上文讲到了报表插件(ReportSheet)设置数据源，接下来，我们介绍有哪些方式可以更新数据源，以及如何更新数据源。


目前，SpreadJS支持两种方式更新数据源，分别是AutoSync和Batch模式。
在介绍这两种模式之前，我们先来看一下addTable这个api
第一个参数是tableName ,第二个参数是IDataSourceOption

通过上文，我们了解到有remote、schema、data属性，除此之外autoSync，batch，分别设置自动同步模式和批量处理模式


一、autoSync
1、接口准备
我们创建一个NodeJS服务，先设置一个数据源

1. let studentList = [
   
2.     {id: 1, name: "张三", age: 27, sex: 0, depId: 1,},
   
3.     {id: 2, name: "李四", age: 41, sex: 0, depId: 1},
   
4.     {id: 3, name: "小王", age: 22, sex: 0, depId: 1},
   
5.     {id: 4, name: "小韩", age: 35, sex: 1, depId: 1},
   
6.     {id: 5, name: "小明", age: 30, sex: 1, depId: 2},
   
7. ];

复制代码

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

1. //读取
   
2. app.get("/student", (req, res) => {
   
3.     res.json(studentList);
   
4. 
   
5. });
   
6. //新增
   
7. app.post("/student", (req, res) => {
   
8.     let item = req.body;
   
9.     studentList.push(item)
   
10.     res.json(item);
    
11. });
    
12. //修改
    
13. app.put("/student", (req, res) => {
    
14.     let info = req.body;
    
15.     studentList.forEach((item, index) => {
    
16.         if (item.id === info.id) {
    
17.             studentList[index] = info
    
18.         }
    
19.     })
    
20.     res.json(info);
    
21. });
    
22. //删除
    
23. app.delete("/student", (req, res) => {
    
24.     let info = req.body && req.body[0];
    
25.     studentList.forEach((item, index) => {
    
26.         if (item.id === info.id) {
    
27.             studentList.splice(index, 1)
    
28.         }
    
29.     })
    
30.     res.json({succeed: true});
    
31. });

复制代码

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

1.      spread.dataManager().addTable('student', {
   
2.             autoSync:true,
   
3.             remote: {
   
4.                 read: {method: 'get', url: 'http://localhost:3000/student'},
   
5.                 create: {method: 'post', url: 'http://localhost:3000/student'},
   
6.                 update: {method: 'put', url: 'http://localhost:3000/student'},
   
7.                 delete: {method: 'delete', url: 'http://localhost:3000/student'}
   
8.             }
   
9.         });

复制代码

通过上述代码，我们设置了四个http请求，分别对应read读取，create新增，update修改，delete删除的接口。
那么怎么通过UI 方式设置呢？
可以参考下图

3、创建报表

设置好数据后，我们来创建一个学生报表，如下动图所示：

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

创建好报表后，我们进行填报设置。
4、填报设置

按上图所示，先点击“填报设置”，在弹窗中点击“添加”按钮，接下来选择数据源table表，然后点击“智能添加字段” ，最后选择id为主键。
5、数据填报
在填报设置好之后，我们就可以进行数据填报了
1）、修改
将张三的年龄改为30 ，修改后发现左上角有红色标记，用来标脏。右键点击“提交”。

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

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

2）新增/删除
注意，新增的时候要为id设置一个默认值=SJS.UUID()

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

至此，我们就完成了学生表的基本数据填报工作。
这时候，有小伙伴就会问，那如果想要批量对数据更新呢，没有关系，我们有批处理模式
二、batch


1、接口准备
同样，我们在nodejs服务中，设置一个批处理的接口，注意要返回的数据要包括successed , 具体参考这篇文章
简单来说，见下图

1. student.post("/student/batchUpdate", (req, res) => {
   
2.     let obj = []
   
3.     const resultArray = req.body
   
4.     resultArray.forEach((item, index) => {
   
5.         obj[index] = {
   
6.             "succeed": true
   
7.         }
   
8.         if (item.type === 'update') {
   
9.             let _index = item.sourceIndex
   
10.             studentList[_index] = item.dataItem
    
11.         } else if (item.type === 'insert') {
    
12.             studentList.push(item.dataItem)
    
13.             obj[index].data = item.dataItem
    
14.         } else if (item.type === 'delete') {
    
15.             let _index = item.sourceIndex
    
16.             studentList.splice(_index, 1)
    
17.         }
    
18. 
    
19.     })
    
20.     res.json(obj);
    
21. });
    

复制代码

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


2、数据源设置
batch表示在批处理模式下，数据更改将保留在数据源中，此时在remote中批处理的接口，如下代码所示：

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

复制代码

那么UI上怎么设置呢？


3、创建报表/填报设置



参考上文
4、数据填报