登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

122 主题	1万帖子	1万积分

积分: 16481

131358
金币
122
主题
11583
帖子

最新发帖

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

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

论坛元老 / 发表于：2021-11-25 09:44 / 查看：3432 / 回复：0

本帖最后由 Derrick.Jiao 于 2021-11-25 09:49 编辑

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

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

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

image.png314812926.png

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

image.png818967284.png

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

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

复制代码

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

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

复制代码

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

3.29 KB, 下载次数: 136

收藏

回复

0 个回复