V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GrapeCityChina
V2EX  ›  推广

SpreadJS 实现多表头数据绑定,附数据源文件

  •  
  •   GrapeCityChina · 2020-04-03 10:04:55 +08:00 · 848 次点击
    这是一个创建于 1680 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原文地址:https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=74236&extra=page%3D1

    SpreadJS ,作为一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,可为用户带来亲切的 Excel 使用体验,并可满足企业 IT 部门 Web Excel 组件开发、数据填报、Excel 类报表设计、表格文档协同编辑等业务场景。

    在日常使用 SpreadJS 开发的过程中,我们经常会使用其数据绑定功能,SpreadJS 的数据绑定提供双向绑定模式。借助 SpreadJS 数据绑定,可以很方便的将源数据展示在指定的区域内,以实现数据的获取与变更。

    本文将就“多层表头数据绑定”的难度与实现方式做以阐述,希望给大家提供参考:

    多层表头的数据绑定

    巧用 SpreadJS 给多层表头绑定数据

    众所周知,由于中美文化的差异,Excel 的 table 功能难以实现多层表头,大家都是在 sheet 中绘制多层表格来达到相似的效果。

    那么,在 SpreadJS 中该如何给这样的表格模板做数据绑定呢?

    由于 sheet 的工作表区域中( viewport )存在表头信息,所以不能使用表单绑定。因此,我们只能通过表格绑定来完成,但是表格 table 无法在 Excel 中设置多层表头,所以我们需要借助 SpreadJS 提供的技巧,对模板进行改造。

    1. 用 SpreadJS 设计器打开这个 Excel 模板

    2. 保留表头,删除需要绑定数据的相关表格,这里我们需要通过表格绑定重新建立

    image.png

    1. 按照上面表格每一列的内容,对应插入一个空白的 table

    image.png

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

    image.png

    1. 利用汇总行设置汇总公式

    image.png

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

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

    image.png

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

    image.png

    1. 勾掉标题行:实现隐藏标题行

    image.png

    1. 删除上方的空白行

    image.png

    这样,一个改造过的表格模板就完成了。

    下面,我们开始实现多表头数据绑定,模拟的数据源见文末附件。

    首先,通过代码将数据源绑定到表格中,data 就是附件的数据源:

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

    sheet.setDataSource(source);

    运行结果如下: image.png

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

    image.png

    总结

    以上,就是 SpreadJS 实现多表头数据绑定的全部步骤,其实通过 SpreadJS 实现数据绑定的方式非常简单,重点在于对 Excel 模板的改造过程。

    借助 SpreadJS 的内置形状、基于单元格级别的数据绑定方式和 450 多种公式支持,您可以很轻易的将 Excel 模板改造成所需的样式,并“一丝不变”的导入 Excel 中。

    数据源文件:data.json(请将这个 Json 文件,通过 SpreadJS 的在线表格编辑器导入,以查看效果)

    SpreadJS 在线表格编辑器导入界面

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   966 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 22:18 · PVG 06:18 · LAX 14:18 · JFK 17:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.