【easyUI】combobox显示对象内容

背景

在某个需求中，使用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>'; 
                }
            });

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

这里写图片描述

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

分析一下我们要显示的数值内容，可以发现，我们需要显示的是一个对象中的字段，而不是普通字段，因此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);
                }
            });