请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Wilson.Zhang
超级版主   /  发表于:2025-1-26 17:43  /   查看:69  /  回复:0
本帖最后由 Wilson.Zhang 于 2025-1-26 17:46 编辑

背景:使用复选框并绑定数据,同时需要导出文件为xlsx供线下通过Microsoft Excel打开。
问题原帖:https://gcdn.grapecity.com.cn/showtopic-232501-2-1.html

这个问题包含三个需求因素:复选框、数据绑定、线下通过Microsoft Excel打开。

首先看看复选框,SpreadJS支持的复选框包括复选框单元格和复选框控件。复选框单元格是SpreadJS内部特别支持的单元格类型之一,但是Microsoft Excel不支持该特性,因此无法在Microsoft Excel软件中正常显示。而复选框控件是SpreadJS和Microsoft Excel共同支持的表单控件,但是这样的控件不是单元格,而是悬浮在单元格上的形状。受益于其悬浮的本性,可以在单元格的空间位置中随意设置其悬浮位置,完成特定的显示效果。

因此,对于线下通过Microsoft Excel打开文件的需要,在SpreadJS中使用复选框控件代替复选框单元格类型,以此兼容。
至此,便解决了三个需求因素中的两个。

然而,SpreadJS的数据绑定信息被设置在单元格上,复选框控件作为形状悬浮着无法支持数据绑定。
从复选框控件所属类FormControlShape入手分析,options属性存储了对控件的设置信息,如图1右侧所示的设置面板各选项即对应了options属性对象各属性。

image.png806670837.png
图1. 复选框options属性对应面板

我们发现设置面板中有一个名为“单元格链接”的属性,该属性的值是一个单元格引用,即将单元格引用和控件桥接在一起,单元格的值同步设置为控件的值。无论单元格还是控件,其值变化会同步至彼此,如图2所示。

cellLinks.gif175443114.png
图2. cellLink

由cellLinks属性可设想,将已设置的数据绑定单元格链接至复选框控件,当数据源被填报在单元格中后,随即通过cellLinks将数据同步至复选框控件,复选框控件由此显示是否被勾选。至此,三个需求因素均可满足。基本思路如下所述:

1. 在sheet中插入复选框控件,对其设置单元格链接。
2. 对链接单元格设置数据绑定信息,以自动填报数据。
至于被填报在绑定单元格上的数据如何存储,则是业务侧的相关处理,数据库、文件等均可作为保存数据的媒介。

然而,测试发现还有一个小问题阻塞上述方案的执行。如图3所示,为悬浮在单元格B2:B5上的复选框控件分别设置cellLinks为单元格G2:G5。后台加载数据源通过数据绑定填充数据后,发现复选框控件并未能根据实际cellLinks单元格中的数据设置勾选状态。究其原因,发现此时复选框控件的cellLink值全部变为了G5,意味着每个复选框控件均通过G5单元格设置自身的勾选状态。这是为什么呢?调研下,在此之前需要变换一下思路。

cellLink异常.gif559291686.png
图3. cellLink异常

那怎么办呢?cellLink属性值貌似在数据填报后便靠不住了,那我们在为复选框控件设置cellLink属性值时同步将复选框控件与单元格链接的映射关系存储起来,在通过数据绑定路径填报数据后根据改映射关系依次读取cellLink单元格的数据,之后再以该数据设置复选框控件的勾选状态。如图4所示。

复选框控件绑定数据.gif934620361.png
图4. 复选框单元格数据绑定

附上demo,以供参考。待调研结果出来后,再在本文同步更新。

复选框数据绑定.html

7.42 KB, 下载次数: 1

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部