SpreadJS+GCExcel实现数据绑定

SpreadJS作为纯前端类Excel的表格控件，可以很好的设计模板。GCExcel作为一个高性能，低内存的电子表格组件，它提供给开发人员一套丰富并且强大的API集合，用以生成，操作，转换，分享与微软Excel兼容的电子表格。

SpreadJS + GCExcel 结合使用，将产生1+1>2的效果。那么，如果在Spread中进行模板设计,在GCExcel中进行数据绑定，该怎么做呢？一起来看看吧

首先在线表格编辑器中设计模板与字段，如下图所示：

设计模板与字段后，添加工具栏按钮“数据绑定”。

1. var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
   
2. config.commandMap = {
   
3.   BindData: {
   
4.     title: "BindData data to server",
   
5.     text: "数据绑定",
   
6.     iconClass: "ribbon-button-welcome",
   
7.     bigButton: "true",
   
8.     commandName: "BindData",
   
9.     execute: async (context, propertyName, fontItalicChecked) => {}
   
10. config.ribbon[0].buttonGroups[0] = {
    
11.     thumbnailClass: "save",
    
12.     commandGroup: {
    
13.         children: [
    
14.             {
    
15.                 direction: "vertical",
    
16.                 commands: ["BindData"],
    
17.             }
    
18.         ],
    
19.     },
    
20. };
    
21. designer.setConfig(config)

复制代码

此按钮的作用在于将当前模板转换为json数据，传送给后端。这里传送给后端的json数据由两部分组成，一部分由spread.toJSON()获取，一部分是模板绑定的字段schema由designer.getData()获取。

具体的execute代码如下：

1. execute: async (context, propertyName, fontItalicChecked) => {
   
2.                         let spread = context.Spread;
   
3.                         let formData = new FormData();
   
4.                         let json = spread.toJSON({
   
5.                             includeBindingSource: true
   
6.                         })
   
7.                         var designerBindingPathSchema = designer.getData("treeNodeFromJson") || designer.getData("updatedTreeNode") || designer.getData("oldTreeNodeFromJson");
   
8.                         json.schema = designerBindingPathSchema
   
9.                        formData.append('json',JSON.stringify(json))
   
10.                         $.ajax({
    
11.                             type: "post",
    
12.                             url: "http://localhost:8080/excel",
    
13.                             data: formData,
    
14.                             processData: false,  
    
15.                             contentType: false,  
    
16.                             success: function (data) {
    
17.                                 spread.fromJSON(JSON.parse(data))
    
18.                             },
    
19.                             error: function () {
    
20.                                 alert("请求失败");
    
21.                             }
    
22.                         });
    
23.                     },

复制代码

前端发出请求后，后端接收请求。后端使用SPringMVC框架接收‘/excel’post请求

1. @PostMapping (value = "/excel")
   
2. @CrossOrigin
   
3. public String greeting(@RequestParam(name="json") String json, Model model) {
   
4. }

复制代码

接收到json数据后，GCExcel使用fromJson()方法进行模板场景恢复。之后使用setDataSource()进行数据绑定。

1.                model.addAttribute("json", json);
   
2.                 Workbook workbook = new Workbook();
   
3.                 workbook.fromJson(json);
   
4.                 StationInfo stationInfo = new StationInfo();
   
5.                 stationInfo.name = "九三实验站";
   
6.                 stationInfo.date = String.valueOf(new Date());
   
7.                 stationInfo.rainFalls = new ArrayList<RainFall>();
   
8.                 RainFall rainFall = new RainFall();
   
9.                 rainFall.time = "03:12";
   
10.                 rainFall.precipitation = "21.23";
    
11.                 rainFall.rain = "0.23";
    
12.                 rainFall.record_person = "李四";
    
13.                 rainFall.remark = "";
    
14.                 stationInfo.rainFalls.add(rainFall);
    
15.                 IWorksheet worksheet = workbook.getWorksheets().get(0);
    
16.                 worksheet.setDataSource(stationInfo);

复制代码

此时注意stationInfo类中name字段、date字段、rainFallls字段同模板绑定中的字段一致。

如下图所示：

最后数据绑定成功后，GCExcel还可以实现导出pdf功能，导出excel功能

1. workbook.save("json/test.pdf");
   
2. workbook.save("json/test.xlsx");

复制代码

如果前端想获取绑定后的数据，可以通过 toJson()方法获取GCExcel导出的json数据，返回给前端。

1. String jsonWithOption = workbook.toJson();
   
2. return jsonWithOption;

复制代码

前端接收后端返回的json数据，通过fromJSON()来进行绑定后的数据展示。具体看ajax中success方法

1.    $.ajax({
   
2.                             type: "post",
   
3.                             url: "http://localhost:8080/excel",
   
4.                             data: formData,
   
5.                             processData: false,  //必须
   
6.                             contentType: false,  //必须
   
7.                             success: function (data) {
   
8.                                 spread.fromJSON(data)
   
9.                             },
   
10.                             error: function () {
    
11.                                 alert("请求失败");
    
12.                             }
    
13.                         });

复制代码

至此，SpreadJS+GCExcel前后端交互一起完成了数据绑定。
具体代码见附件