【easyUI】combobox显示对象内容

最新推荐文章于 2025-06-29 21:22:23 发布

原创最新推荐文章于 2025-06-29 21:22:23 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#函数 #string #easyui #combo box

easyui 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何通过配置Combobox的formatter及onSelect函数解决显示对象字段的问题，实现下拉框中选择并显示公司名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

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

完毕！！