找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

200

主题

9899

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
15531

讲师达人悬赏达人微信认证勋章SpreadJS 认证SpreadJS 高级认证元老葡萄

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-3-28 21:36  /   查看:6744  /  回复:2
本帖最后由 Richard.Huang 于 2023-8-11 12:09 编辑

在日常使用SpreadJS进行的开发中,我们经常会用到数据绑定的功能,数据绑定可以很方便的将数据源中的数据展示在指定的绑定区域中并且带有双向绑定,可以很方便的进行数据的获取与变更。而现实中会有很多像下面这样的多层表头的表格:
image.png554397277.png
众所周知Excel的table功能无法设置多层表头,实现多层表头的表格无法借助table的功能,都是在sheet中绘制多层表格。那么在SpreadJS中该如何给这样的表格模板做数据绑定呢?由于sheet的工作表区域中(viewport)存在着表头信息,所以不能使用表单绑定,那么我们眼下只有用表格绑定来完成了,但是表格table因为在Excel中无法设置多层表头,所以我们需要使用一些技巧对模板做一些改造。
首先用设计器打开这个Excel模板
接下来,保留表头,然后删除需要绑定数据的相关表格,这里我们需要通过表格绑定重新建立
image.png482310485.png
之后,按照上面的表格列插入一个对应的空白table
image.png536692809.png
由于最后一行是整体的合计,需要我们将汇总行也设置出来
image.png420556334.png
利用汇总行设置汇总公式
image.png200610045.png
之后利用模板功能,设置表格绑定,最后两列为公式计算结果所以不设置绑定项
拖拽右侧的树至表格建立绑定关系(如果需要改变调整每列的绑定关系,可以点击下图红框所示的向下箭头按钮在其中进行调整)
image.png730233459.png
为了保证样式的统一,我们清空表格样式
image.png520075988.png
勾掉标题行隐藏标题行
image.png995045166.png
然后删除上方的空白行
image.png202634276.png
这样表格模板就完成了
之后我们模拟一个数据源进行数据绑定,数据源见附件
接下来通过代码将数据源绑定到表格中,data就是附件的数据源
  1. var source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
  2. sheet.setDataSource(source);
复制代码
结果如下:

image.png728783263.png
最后在通过代码给后两列设置公式,完成最终结果
image.png301428832.png


data.json

1.5 KB, 下载次数: 731

2 个回复

倒序浏览
NanChengQing
初级会员   /  发表于:2023-10-23 11:29:59
沙发
image.png593280639.png 依照这个方式设置在绑定时出现这个问题,是为什么呢
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2023-10-23 13:58:39
板凳
NanChengQing 发表于 2023-10-23 11:29
依照这个方式设置在绑定时出现这个问题,是为什么呢

您好,请您在求助中心发一个新帖子,详细描述一下您遇到的问题,提供可以复现您问题的Demo,这边在新帖子中帮您跟进调研。
SpreadJS 17.0.8 | GcExcel 7.1.0 已发布~
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部