纯前端表格控件SpreadJS使用教程：表格绑定如何绑定多层表头

SpreadJS正式版

在日常使用SpreadJS进行的开发中，我们经常会用到数据绑定的功能，数据绑定可以很方便的数据源的数据展示在指定的绑定区域中并且带有双向的绑定可以很方便的进行数据的获取与变更。而现实中会有很多向下面这样的多层表头的表格：

众所周知Excel的table功能无法设置多层的表头，通过多层表头的表格无法借助table的功能，都是在sheet中绘制多层表格。那么在SpreadJS中该如何给这样的表格模板做数据绑定呢于sheet的工作表区域中(viewport)存在着表头信息，所以不能使用表单绑定，那么我们眼下只有用表格绑定来完成了，但是表格table因为在Excel中无法设置多层表头，所以我们需要使用一些技巧对模板做一些改造。

首先用设计器打开这个Excel模板

接下来，保留表头，然后删除需要绑定数据的相关表格，这里我们需要通过表格绑定重新建立

之后，我们按照上面的表格每一列的内容对应插入一个空白的table

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

利用汇总行设置汇总公式

之后利用模板功能，设置表格绑定，最后两列为公式计算结果所以不设置绑定项

拖拽右侧的树至表格建立绑定关系(如果需要改变调整每列的绑定关系，可以点击下图红框所示的向下箭头按钮在其中进行调整)

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

勾掉标题行隐藏标题行

然后删除上方的空白行

这样表格模板就完成了

之后我们模拟一个数据源进行数据绑定,数据源见附件

接下来通过代码将数据源绑定到表格中，data就是附件的数据源

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

结果如下：

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

本教程内容就是这样了，感兴趣的朋友可以关注我们 了解更多资讯！您可以下载SpreadJS试用版免费体验~

想要购买VARCHART XGantt正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：