复杂表格数据绑定方案 - 设计模板

收藏

本帖最后由 Lynn.Dou 于 2024-12-17 15:12 编辑

背景：

数据绑定是SpreadJS中非常核心的一个功能，尤其在数据填报等场景中发挥着重要的价值。
除了基础的表格结构外，有用户反馈是否可以支持复杂表头的表格绑定。我们以一个具体的例子来带大家学习下实现思路。
（前提：在学习本文前，您需要了解基础的数据绑定功能）

思路：

我们希望最终生成的报表数据结构为下图示意（均为虚拟数据，仅作测试）
image.png928608093.png

接下来拆分为以下几步：

1、表格设计
首先我们需要结合实际的业务需求，分析下哪些单元格需要用到数据绑定，以及使用什么模式的数据绑定比较合适。
填写的具体人员以及具体的销售数据我们希望用户可以自己填报、修改，后续将填报数据收集并存储后台。相应的，也可以从后台获取数据源并在SpreadJS中显示。

红框部分填写为单个值，不需要纵向扩展，适合用单元格绑定。
绿框部分为明显的纵向结构，数据条数可能不固定，适合用表格绑定。
蓝框部分两种绑定方式均可以，根据需要自己选择就好。这里我们选择了表格绑定。

区域划分好后，我们开始设计模板。下图为模板雏形：
image.png373545836.png

对想要做table绑定的区域创建table，结果如下图，但看起来似乎不大符合我们预期的效果。
image.png793588866.png

事实上，对于复杂table表头，由于存在多行多列、合并单元格等可能性，直接用于创建table并不理想。
更推荐将table原有的表头隐藏，用普通单元格来实现“伪表头”效果，通过后续对样式的调整，使视觉上保持统一。
实现方式大致为：插入新行 - 创建table - 合并单元格处理 - 不显示标题行 - 删除此前新增的行。（具体的操作方式可以参考下方动图。）
此时效果如下：
image.png220429381.png

table的样式不符合整体设计，所以需要将样式修改。如下图：
image.png262485045.png

在合计中添加上table公式：
image.png692105407.png

至此，模板雏形已经创建好了。对于复杂表格，难点主要在于绑定方式的判断以及复杂表头的设计，借助此文思路，你会发现并非想象中的那么困难。
在下一节，我们会学习如何绑定字段。

下方为具体操作步骤录制动图，供参考：
createTable.gif220882567.png

		自动登录	找回密码
密码			立即注册

复杂表格数据绑定方案 - 设计模板

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人