多选下拉列表实现多组复选框效果原创
金蝶云社区-开发者赋能部_吴富彪
开发者赋能部_吴富彪
4人赞赏了该文章 3,474次浏览 未经作者许可,禁止转载编辑于2022年06月15日 10:28:17
summary-icon摘要由AI智能服务提供

本文介绍了如何通过组合控件(多选下拉框+复选框)实现多组复选框对应同一数据库字段的功能。首先通过设置多选下拉框(不可见)来存储值,复选框展示视觉效果。然后,通过插件实现多选下拉框的存值及复选框的选中效果,确保两者同步更新。文中详细说明了实现步骤,包括创建单据、设置下拉项和复选框对应、插件代码编写等,并提供了开发环境版本及注意事项。

关键词:多组复选框、多选下拉列表


一、需求

多组复选框的值对应同一语义字段,见图一;目前多选下拉框是没有这种平铺复选框效果的。单选按钮组只能实现单选,如果要实现这种效果,并且在数据库中对应同一个字段,我们可以通过组合控件去实现。

image.png

图一

二、思路与方案

1、使用组合控件:多选下拉框+复选框;多选下拉框用来存储值,复选框展示效果(表字段名为空)

2、设置多选下拉框的下拉项和多组复选框对应;

3、设置多选下拉框的可见性,为不可见

4、插件实现多选下拉框的存值和多组复选框的选中效果

三、实现过程

1、创建单据(kdec_mulcheckbox),添加多选下拉框和复选框,设置多选下拉框的可见性和复选框不存值

image.png

图二

image.png

图三

2、设置多选下拉框的下拉项和多组复选框对应;

image.png

图四

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));
        }
    }
}


四、效果图

image.png

 图五

五、开发环境版本

不限,本样例采用的轻量级环境,版本是: 苍穹版本号 COSMICV4.0.012.0  星瀚版本号 CONSTELLATIONV4.0.012.0

 

六、注意事项

多组复选框,如果是选项比较少可以使用“字段组合容器”,我这里用的Flex面板画出来的

在propertyChanged事件中去setValue会再触发propertyChanged所以对应的条件判断要做好

 

七、参考资料

开发平台

学习成长中心 

图标赞 4
4人点赞
还没有人点赞,快来当第一个点赞的人吧!
图标打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!

您的鼓励与嘉奖将成为创作者们前进的动力,如果觉得本文还不错,可以给予作者创作打赏哦!

请选择打赏金币数 *

10金币20金币30金币40金币50金币60金币
可用金币: 0