【集算表】如何在30分钟完成表格增删改查的前后端框架搭建

在日常的系统开发中，表格（Grid）是最常见的数据表达形式，而表格中增删改查又是最常见的功能之一。所以在日常的开发选中，快速的构建表格增删改查的框架将大大的加速开发者的效率。
此次SpreadJS V15所推出的集算表功能就是专门用来应对这样的场景，有关于集算表的介绍可以参考这篇博客《2022年了，你竟然不知道“集算表”，这就是你的问题了》
那么如何快速搭建带有集算表的前后端增删改查框架呢，下面将按照步骤一步步进行拆解1、后端使用Spring Boot做快速搭建，创建一个spring boot web工程，下面是大致用到的dependencies
基本除了springboot自带的之外，额外引用了fastjson用于对一些复杂json格式进行处理。
2、构建前后台，可以选择前后端分离，或者结合的方式（例子中选中了前后端结合的方式），大致工程结构如下：

3、构建前端页面，前端页面的可以选择适合的框架（VUE，React，Angular，例子中使用源生JS进行构建）,在页面中引入SpreadJS TableSheet（集算表）中的相关依赖

需在原本SpreadJS的依赖基础上引入gc.spread.sheets.tablesheet这个依赖。
4、构建前端集算表配置配置集算表的功能操作

1. var myTable = dataManager.addTable("myTable", {
   
2.                         remote: {
   
3.                             read: {
   
4.                                 url: "initDataManager"
   
5.                             },
   
6.                                         batch: {
   
7.                                                 url: "batchUpdateDataManager"
   
8.                                         }
   
9.                         },
   
10.                                 batch: true,
    
11.                                 autoSync: false
    
12.                     });

复制代码

上述配置了读取和批量两个操作，读取设置是在指定地址下读取数据。而批量操作包含对数据的批量增删改。从而覆盖到整个增删改查逻辑。

1. var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
   
2.                     var options = sheet.rowActionOptions();
   
3.                     options.push(
   
4.                         rowActions.removeRow,
   
5.                         rowActions.saveRow,
   
6.                         rowActions.resetRow,
   
7.                     );
   
8.                     sheet.rowActionOptions(options);

复制代码

上述代码设置了页面上供用户进行操作的对应按钮（删除行，保存行，重置行）

1. myTable.fetch().then(function() {
   
2.                         var view = myTable.addView("myView", [
   
3.                             { value: "id", caption:"编号", width: 80 },
   
4.                             { value: "firstname", caption:"姓", width: 100 },
   
5.                             { value: "lastname", caption:"名", width: 100 },
   
6.                             { value: "homephone", caption:"电话", width: 100 }
   
7.                                ]);
   
8.                         sheet.setDataView(view);
   
9.                         });

复制代码

上述代码设置了表格的结构，对每一列进行了设置

1. var submitButton = document.getElementById('submit');
   
2.                     submitButton.addEventListener('click', function() {
   
3.                         sheet.submitChanges();
   
4.                     });

复制代码

通过设置一个提交的按钮，用于将批量的修改进行一次性提交。
5、后端构建对应的数据增删改查逻辑（实例中通过一个假数据构建一个list进行模拟，实际情况可以扩展持久层与真实的数据库进行交互）。

1. private static List<Employee> list = new ArrayList<Employee>();
   
2.         static {
   
3.                 for(int i=0;i<10;i++) {
   
4.                         Employee employee = new Employee();
   
5.                         employee.setId(i);
   
6.                         employee.setFirstname("FirstName"+i);
   
7.                         employee.setLastname("LastName"+i);
   
8.                         employee.setHomephone("HomePhone"+i);
   
9.                         list.add(employee);
   
10.                 }
    
11.         }
    
12.        
    
13.         @RequestMapping(value = "/initDataManager", method = RequestMethod.GET)
    
14.         @ResponseBody
    
15.         public List<Employee> initWorkBook() {
    
16.                 return list;
    
17.         }
    
18.        
    
19.         @RequestMapping(value = "/batchUpdateDataManager", method = RequestMethod.POST)
    
20.         @ResponseBody
    
21.         public List<Map<String,Object>> batchUpdateDataManager(@RequestBody List<BatchManager> batchManagerList) {
    
22.                 List<Map<String,Object>> reutrnList = new ArrayList<Map<String,Object>>();
    
23.                 for (BatchManager batchManager : batchManagerList){
    
24.                         Map<String,Object> returnMap = new HashMap<String,Object>();
    
25.                         String type = batchManager.getType().toString();
    
26.                         try{
    
27.                                 if (type.equals("update"))
    
28.                     {
    
29.                         Employee employee = batchManager.getDataItem();
    
30.                         int index = batchManager.getSourceIndex();
    
31.                         Employee employeeSource = list.get(index);
    
32.                         employeeSource.setId(employee.getId());
    
33.                         employeeSource.setFirstname(employee.getFirstname());
    
34.                         employeeSource.setLastname(employee.getLastname());
    
35.                         employeeSource.setHomephone(employee.getHomephone());
    
36.                         list.remove(index);
    
37.                         list.add(index, employeeSource);
    
38.                         returnMap.put("succeed", true);
    
39.                     }else if (type.equals("insert"))
    
40.                     {
    
41.                             Employee employee = batchManager.getDataItem();
    
42.                             list.add(employee);
    
43.                             returnMap.put("succeed", true);
    
44.                             employee.setId(employee.getId()+10000);
    
45.                             returnMap.put("data", employee);
    
46.                     }else if (type.equals("delete"))
    
47.                     {
    
48.                             int index = batchManager.getSourceIndex();
    
49.                             list.remove(index);
    
50.                             returnMap.put("succeed", true);
    
51.                     }
    
52.                                
    
53.                         }catch(Exception e) {
    
54.                                 returnMap.put("succeed", false);
    
55.                         }
    
56.                         reutrnList.add(returnMap);
    
57.                 }
    
58.                 return reutrnList;
    
59.         }

复制代码

这样，我们的框架就算搭建完成了。后面可以根据情况再做细微的调整和优化。总共耗时30分钟左右。
实例的代码可以参考附件，有兴趣的朋友可以下载自行参考搭建

先收藏

Tom猫 发表于 2022-5-11 13:00
先收藏