本帖最后由 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属性对象各属性。
图1. 复选框options属性对应面板
我们发现设置面板中有一个名为“单元格链接”的属性,该属性的值是一个单元格引用,即将单元格引用和控件桥接在一起,单元格的值同步设置为控件的值。无论单元格还是控件,其值变化会同步至彼此,如图2所示。
图2. cellLink
由cellLinks属性可设想,将已设置的数据绑定单元格链接至复选框控件,当数据源被填报在单元格中后,随即通过cellLinks将数据同步至复选框控件,复选框控件由此显示是否被勾选。至此,三个需求因素均可满足。基本思路如下所述:
1. 在sheet中插入复选框控件,对其设置单元格链接。
2. 对链接单元格设置数据绑定信息,以自动填报数据。
至于被填报在绑定单元格上的数据如何存储,则是业务侧的相关处理,数据库、文件等均可作为保存数据的媒介。
然而,测试发现还有一个小问题阻塞上述方案的执行。如图3所示,为悬浮在单元格B2:B5上的复选框控件分别设置cellLinks为单元格G2:G5。后台加载数据源通过数据绑定填充数据后,发现复选框控件并未能根据实际cellLinks单元格中的数据设置勾选状态。究其原因,发现此时复选框控件的cellLink值全部变为了G5,意味着每个复选框控件均通过G5单元格设置自身的勾选状态。这是为什么呢?调研下,在此之前需要变换一下思路。
图3. cellLink异常
那怎么办呢?cellLink属性值貌似在数据填报后便靠不住了,那我们在为复选框控件设置cellLink属性值时同步将复选框控件与单元格链接的映射关系存储起来,在通过数据绑定路径填报数据后根据改映射关系依次读取cellLink单元格的数据,之后再以该数据设置复选框控件的勾选状态。如图4所示。
图4. 复选框单元格数据绑定
附上demo,以供参考。待调研结果出来后,再在本文同步更新。
|
|