彩票走势图

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

转帖|使用教程|编辑:莫成敏|2020-04-13 15:50:18.810|阅读 580 次

概述:SpreadJS 是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,具有“高性能、跨平台、与 Excel 高度兼容”的产品特性。本文介绍了表格绑定如何绑定多层表头。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性,备受以华为、招商银行、苏宁易购、天弘基金等为代表的企业用户青睐。在带来亲切的 Excel 使用体验的同时,满足 Web Excel 组件开发、数据填报、Excel 类报表设计、表格文档协同编辑应用等业务场景,极大降低了企业研发成本和项目交付风险。

点击下载SpreadJS正式版

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

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

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

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

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

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

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

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

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

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

利用汇总行设置汇总公式

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

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

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

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

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

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

勾掉标题行隐藏标题行

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

然后删除上方的空白行

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

这样表格模板就完成了

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

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

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

结果如下:

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

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

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

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


想要购买VARCHART XGantt正版授权,或了解更多产品信息请点击



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP