【easyUI】combobox显示对象内容

痛定思痛。 2022-06-11 01:41 206阅读 0赞

# 背景 #

在某个需求中，使用combobox下拉框来选择下级批准的公司，但公司名称字段在批准对象中的公司对象里面保存。大致结构如下：

CompanyPass { Company company }
    Company { String name }

如果使用combobox默认函数处理，配置textField:‘name’完全不能显示公司名称

处理方法

使用combobox的formatter函数

$("#id").combobox({
                    editable:false,
                    panelHeight:'auto',
                    valueField : 'id',
                    textField: 'name',
                    url: "queryListDict.do",    
                    onLoadSuccess: function(data){ 
                        //设置默认值
    
                    },
                    formatter: function(row){ 
                        return '<span class="item-text">'+row.company.name+'</span>'; 
                    }
                });

做到这个时候，下拉框中已经能显示公司名称了，效果如下：

![这里写图片描述][SouthEast]

但是，选中之后，文本框中没有数值。

分析一下我们要显示的数值内容，可以发现，我们需要显示的是一个对象中的字段，而不是普通字段，因此combobox无法自动解析。

因此，加上下面的onSelect函数代码，处理选中事件

onSelect: function(row){ 
                        $('#id').combobox('setText', row.company.name);
                    }

完整代码：

$("#id").combobox({
                    editable:false,
                    panelHeight:'auto',
                    valueField : 'id',
                    textField: 'code',
                    url: "queryListDict.do",
                    formatter: function(row){ 
                        return '<span class="item-text">准入编号：'+row.code+' 劳务队：'+row.company.name+'</span>'; 
                    },
                    onSelect: function(row){ 
                        $('#id').combobox('setText', row.company.name);
                    }
                });

**完毕！！**

[SouthEast]: /images/20220611/9ba1affa7810499e8effc936ce76aa0c.png