登录/注册

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

217 主题	1万帖子	1万积分

Rank: 8 Rank: 8

积分: 15916

85499
金币
217
主题
10057
帖子

最新发帖

如何设计多层表头（表格绑定如何绑定多层表头）

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

超级版主 / 发表于：2020-3-28 21:36 / 查看：8345 / 回复：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

image.png482310485.png

之后，按照上面的表格列插入一个对应的空白table
image.png536692809.png

image.png536692809.png

由于最后一行是整体的合计，需要我们将汇总行也设置出来
image.png420556334.png

image.png420556334.png

利用汇总行设置汇总公式
image.png200610045.png

image.png200610045.png

之后利用模板功能，设置表格绑定，最后两列为公式计算结果所以不设置绑定项
拖拽右侧的树至表格建立绑定关系(如果需要改变调整每列的绑定关系，可以点击下图红框所示的向下箭头按钮在其中进行调整)
image.png730233459.png

image.png730233459.png

为了保证样式的统一，我们清空表格样式
image.png520075988.png

image.png520075988.png

勾掉标题行隐藏标题行
image.png995045166.png

image.png995045166.png

然后删除上方的空白行
image.png202634276.png

image.png202634276.png

这样表格模板就完成了
之后我们模拟一个数据源进行数据绑定,数据源见附件
接下来通过代码将数据源绑定到表格中，data就是附件的数据源

var source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
sheet.setDataSource(source);

复制代码

结果如下：

image.png728783263.png

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

image.png301428832.png

1.5 KB, 下载次数: 1163

收藏

回复

点击查看 -->【预览版体验】SpreadJS v16.0 预览版 - 新文件结构

2 个回复

倒序浏览

NanChengQing
金牌服务用户 / 发表于：2023-10-23 11:29:59 沙发

image.png593280639.png

依照这个方式设置在绑定时出现这个问题，是为什么呢

回复 使用道具举报

Joestar.Xu
超级版主 / 发表于：2023-10-23 13:58:39 板凳

NanChengQing 发表于 2023-10-23 11:29
依照这个方式设置在绑定时出现这个问题，是为什么呢

您好，请您在求助中心发一个新帖子，详细描述一下您遇到的问题，提供可以复现您问题的Demo，这边在新帖子中帮您跟进调研。

回复 使用道具举报