利用数据绑定实现区域模板功能

有小伙伴使用过GcExcel，知道我们有模板语法这个功能，主要实现的就是通过一个模板在后端根据数据源去生成一个指定的表单，非常方便快捷。

在前端SpreadJS，我们也有区域模板这一功能，但是他是一个单元格类型，且无法直接编辑与导出Excel。
https://demo.grapecity.com.cn/sp ... lls/range-template#

那么今天这篇教程就来实现一个利用数据绑定实现的自定制区域模板功能。可以先看下效果。


首先，我们先设计上一个需要填报或者绑定的模板


加载完模板后，我们定义了一些数据源。

1.   var score = [
   
2.                 { class: 'A班', name: "小明", cn: 88, ma: 69, en: 77 },
   
3.                 { class: 'A班', name: "小红", cn: 90, ma: 87, en: 80 },
   
4.                 { class: 'B班', name: "小张", cn: 60, ma: 68, en: 71 },
   
5.                 { class: 'B班', name: "小焦", cn: 95, ma: 88, en: 79 },
   
6.                 { class: 'C班', name: "小绿", cn: 57, ma: 66, en: 68 },
   
7.                 { class: 'C班', name: "小菊", cn: 79, ma: 69, en: 71 }
   
8. 
   
9.             ];

复制代码

接下来的重头戏就是绑定，我们通过遍历，给将数据源一次一次地给数据源进行绑定，然后将新绑定的表单通过copyTo的接口复制到下一个区域，直至将数据源遍历完。最后再通过deleteRows将初始的模板删除。

1. for(var i = 0; i < score.length; i++){
   
2.         
   
3.                     var data = score[i];
   
4.                     var source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
   
5. 
   
6.                     sheet.setDataSource(source);
   
7. 
   
8.                     sheet.copyTo(1, 1, 7 * ( i + 1 ) - i, 1, 5, 4, 1|2|4|8|16|32|64|128|512|1024)
   
9. 
   
10.                 }
    
11. 
    
12.                 sheet.deleteRows(1, 6);

复制代码

我们也可以通过导出excel的按钮将这个表单导出。下载附件即可查看完整的demo。