多选下拉列表实现多组复选框效果

多选下拉列表实现多组复选框效果原创

开发者赋能部_吴富彪

4人赞赏了该文章 2646次浏览编辑于2022年06月15日 10:28:17

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

一、需求

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

图一

二、思路与方案

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