How to complete the front-end and back-end framework construction of table addition, deletion, modification and inspection in 30 minutes

What can you do in 30 minutes?
You can have a hearty meal; you can simply clean the room; or you can dance 10 times Liu Genghong's "Compendium of Materia Medica" shuttlecock exercise.
Today, Ben Grape will take you to complete the front-end and back-end construction of a table system with addition, deletion, modification, and query within 30 minutes!

In daily system development, grid (Grid) is the most common form of data expression, and "add, delete, modify and check" in the table is one of the most common functions. Therefore, in the daily development process, quickly constructing a framework for adding, deleting, modifying and checking tables will become one of the most important parts affecting development efficiency.
In order to achieve the goal of quickly building a table system in 30 minutes, we need to review the relevant content of the collection table that we introduced in the article at the beginning of the year.

What is a collection table?

In order to make the front-end table not only have the formula calculation ability like Excel, but also have the high performance of the traditional table control, we hope to combine the traditional high-performance structured table (Grid) with the formula calculation engine (CalcEngine).
In order to realize such a design, we first proposed the concept of data management container (DataManager), which completely realized the relational data engine that was only available in the backend in the frontend, thus realizing the environment with a large amount of data (millions of rows). It can achieve second-level loading, sorting, and filtering, and all these operations can be implemented completely in the front-end browser through JavaScript code.
The data management container (DataManager) not only undertakes the functions of data storage and indexing, but also implements functions such as multi-data table relationships, views, and CRUD.
The TableSheet is responsible for presenting the data, views, and relationships organized in the data management container (DataManager) on the web page through the "Canvas canvas" of SpreadJS itself.

With the help of the escalator, the data manager in the spreadsheet has functions such as direct connection to data sources, data relationship (foreign key) management, and asynchronous operation update, and the product data processing and analysis capabilities are further improved.

By integrating the functions and features of the essa tables, the following problems will be very easy to use:

• Load back-end data into tables, analyze and process them
• Need to consolidate and analyze data from multiple data tables (sources)
• Reprocess (modify, calculate, etc.) and write back the raw data provided by the backend

Actual combat begins

After understanding the set calculation table, we will officially start the content construction.

First, we disassemble the problem step by step:
1. The back-end uses Spring Boot for quick construction and creates a spring boot web project. The following are the roughly used dependencies

Basically, in addition to the one that comes with springboot, fastjson is additionally referenced for processing some complex json formats.

2. For the construction of front-end and back-end, you can choose to separate the front-end and back-end, or combine them (in the example, the combination of front-end and back-end is selected). The general project structure is as follows:

3. Build the front-end page. The front-end page can choose the appropriate framework (VUE, React, Angular, in the example, use the source JS to build), and introduce the relevant dependencies in the SpreadJS TableSheet (collective table) into the page.

The dependency of gc.spread.sheets.tablesheet needs to be introduced on the basis of the original SpreadJS dependency.

4. Build the front-end escalator configuration and configure the functional operations of the escalator

 var myTable = dataManager.addTable("myTable", {
                        remote: {
                            read: {
                                url: "initDataManager"
                            },
                                        batch: {
                                                url: "batchUpdateDataManager"
                                        }
                        },
                                batch: true,
                                autoSync: false
                    });

The above configuration configures two operations, read and batch. The read setting is to read data at the specified address. Batch operations include batch additions, deletions, and changes to data. So as to cover the entire logic of addition, deletion, modification and checking.

 var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
                    var options = sheet.rowActionOptions();
                    options.push(
                        rowActions.removeRow,
                        rowActions.saveRow,
                        rowActions.resetRow,
                    );
                    sheet.rowActionOptions(options);

The above code sets the corresponding buttons on the page for the user to operate (delete row, save row, reset row)

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

The above code sets the structure of the table and sets each column

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

By setting a submit button, it is used to submit a batch of modifications at one time.
5. The back-end builds the corresponding data addition, deletion, modification and query logic (in the example, a list is constructed through a fake data for simulation, and the actual situation can be extended to the persistence layer to interact with the real database).

 private static List<Employee> list = new ArrayList<Employee>();
        static {
                for(int i=0;i<10;i++) {
                        Employee employee = new Employee();
                        employee.setId(i);
                        employee.setFirstname("FirstName"+i);
                        employee.setLastname("LastName"+i);
                        employee.setHomephone("HomePhone"+i);
                        list.add(employee);
                }
        }
        
        @RequestMapping(value = "/initDataManager", method = RequestMethod.GET)
        @ResponseBody
        public List<Employee> initWorkBook() {
                return list;
        }
        
        @RequestMapping(value = "/batchUpdateDataManager", method = RequestMethod.POST)
        @ResponseBody
        public List<Map<String,Object>> batchUpdateDataManager(@RequestBody List<BatchManager> batchManagerList) {
                List<Map<String,Object>> reutrnList = new ArrayList<Map<String,Object>>();
                for (BatchManager batchManager : batchManagerList){
                        Map<String,Object> returnMap = new HashMap<String,Object>();
                        String type = batchManager.getType().toString();
                        try{
                                if (type.equals("update"))
                    {
                        Employee employee = batchManager.getDataItem();
                        int index = batchManager.getSourceIndex();
                        Employee employeeSource = list.get(index);
                        employeeSource.setId(employee.getId());
                        employeeSource.setFirstname(employee.getFirstname());
                        employeeSource.setLastname(employee.getLastname());
                        employeeSource.setHomephone(employee.getHomephone());
                        list.remove(index);
                        list.add(index, employeeSource);
                        returnMap.put("succeed", true);
                    }else if (type.equals("insert"))
                    {
                            Employee employee = batchManager.getDataItem();
                            list.add(employee);
                            returnMap.put("succeed", true);
                            employee.setId(employee.getId()+10000);
                            returnMap.put("data", employee);
                    }else if (type.equals("delete"))
                    {
                            int index = batchManager.getSourceIndex();
                            list.remove(index);
                            returnMap.put("succeed", true);
                    }
                                
                        }catch(Exception e) {
                                returnMap.put("succeed", false);
                        }
                        reutrnList.add(returnMap);
                }
                return reutrnList;
        }

In this way, our framework is completed. Subsequent adjustments and optimizations can be made according to the situation. It took about 30 minutes in total.
The code of the example can refer to the attachment, and interested friends can download it for reference and build by themselves

Follow the grape city community, reply "add, delete, modify and check", you can get the demo in the text for free.

More pure front-end form demo online experience:
https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html