多选下拉列表实现多组复选框效果原创
4人赞赏了该文章
3,474次浏览
编辑于2022年06月15日 10:28:17
摘要由AI智能服务提供
本文介绍了如何通过组合控件(多选下拉框+复选框)实现多组复选框对应同一数据库字段的功能。首先通过设置多选下拉框(不可见)来存储值,复选框展示视觉效果。然后,通过插件实现多选下拉框的存值及复选框的选中效果,确保两者同步更新。文中详细说明了实现步骤,包括创建单据、设置下拉项和复选框对应、插件代码编写等,并提供了开发环境版本及注意事项。
关键词:多组复选框、多选下拉列表
一、需求
多组复选框的值对应同一语义字段,见图一;目前多选下拉框是没有这种平铺复选框效果的。单选按钮组只能实现单选,如果要实现这种效果,并且在数据库中对应同一个字段,我们可以通过组合控件去实现。
图一
二、思路与方案
1、使用组合控件:多选下拉框+复选框;多选下拉框用来存储值,复选框展示效果(表字段名为空)
2、设置多选下拉框的下拉项和多组复选框对应;
3、设置多选下拉框的可见性,为不可见
4、插件实现多选下拉框的存值和多组复选框的选中效果
三、实现过程
1、创建单据(kdec_mulcheckbox),添加多选下拉框和复选框,设置多选下拉框的可见性和复选框不存值
图二
图三
2、设置多选下拉框的下拉项和多组复选框对应;
图四
3、插件实现多选下拉框的存值和多组复选框的选中效果
package kd.wfb.dome.formplugin.edit; import com.google.common.base.Joiner; import kd.bos.bill.AbstractBillPlugIn; import kd.bos.entity.datamodel.events.PropertyChangedArgs; import org.apache.commons.lang3.StringUtils; import java.util.ArrayList; import java.util.EventObject; import java.util.List; public class Demo13Edit extends AbstractBillPlugIn { private static final String CHECHBOS_KEY1 = "kdec_checkboxfield"; private static final String CHECHBOS_KEY2 = "kdec_checkboxfield1"; private static final String CHECHBOS_KEY3 = "kdec_checkboxfield2"; private static final String MULCOM_KEY = "kdec_mulcombofield"; /** * 从数据库中加载数据,根据多选下拉框的值,设置复选框组的选中效果 * @param e */ @Override public void afterLoadData(EventObject e) { super.afterLoadData(e); String value = (String) this.getModel().getValue(MULCOM_KEY); if(StringUtils.isNotEmpty(value) && value.contains("1")){ this.getModel().setValue(CHECHBOS_KEY1,true); } if(StringUtils.isNotEmpty(value) && value.contains("2")){ this.getModel().setValue(CHECHBOS_KEY2,true); } if(StringUtils.isNotEmpty(value) && value.contains("3")){ this.getModel().setValue(CHECHBOS_KEY3,true); } } /** * 复选框值改变后,修改多选下拉框的值 * @param e */ @Override public void propertyChanged(PropertyChangedArgs e) { super.propertyChanged(e); String name = e.getProperty().getName(); if(StringUtils.equals(CHECHBOS_KEY1,name) || StringUtils.equals(CHECHBOS_KEY2,name) || StringUtils.equals(CHECHBOS_KEY3,name) ){ boolean value1 = (boolean) this.getModel().getValue(CHECHBOS_KEY1); boolean value2 = (boolean) this.getModel().getValue(CHECHBOS_KEY2); boolean value3 = (boolean) this.getModel().getValue(CHECHBOS_KEY3); List<String> item = new ArrayList<>(); if(value1){ item.add("1"); } if(value2){ item.add("2"); } if(value3){ item.add("3"); } this.getModel().setValue(MULCOM_KEY,Joiner.on(",").join(item)); } } }
四、效果图
图五
五、开发环境版本
不限,本样例采用的轻量级环境,版本是: 苍穹版本号 COSMICV4.0.012.0 星瀚版本号 CONSTELLATIONV4.0.012.0
六、注意事项
多组复选框,如果是选项比较少可以使用“字段组合容器”,我这里用的Flex面板画出来的
在propertyChanged事件中去setValue会再触发propertyChanged所以对应的条件判断要做好
七、参考资料
元数据及插件.zip(9.89KB)
赞 4
4人点赞
还没有人点赞,快来当第一个点赞的人吧!
打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!
推荐阅读
您的鼓励与嘉奖将成为创作者们前进的动力,如果觉得本文还不错,可以给予作者创作打赏哦!
请选择打赏金币数 *
10金币20金币30金币40金币50金币60金币
可用金币: 0