EasyUI之combobox

最新推荐文章于 2025-08-24 09:13:11 发布

原创最新推荐文章于 2025-08-24 09:13:11 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #前端 #javascript

本文介绍了EasyUI插件中的Combobox组件使用方法，包括HTML结构设置、参数配置、常用方法及事件处理等内容，并提供了实例代码。

HTML ：

1、需要引入class=" easyui-combobox”

2、参数设置需要在data-options中设置

3、属性参数配置：

valueField：基础数据值名称绑定到Combobox(提交值)

textField：基础数据的字段名称绑定的Combobox（显示值）

mode:定义当文本改变时如何加载列表数据，当设置为remote模式下，什么类型的用户将被发送http请求参数名为'q'的服务器，以获取新的数据。

url：从远程URL来加载列表数据

method：http方法检索列表数据

data：列表中被加载的数据

filter：定义如何过滤本地数据“模式”设置为'local'

formatter：定义如何呈现行

loader：定义如何从远程服务器加载数据

<input class="input-30 easyui-combobox" value="${(info.factoryCode)!''}"
                               editable="false"
                               data-options="url:'${ctx}/common/userFactoryList',method:'get',valueField: 'factoryId',textField: 'factoryName',
                                icons: [{
                                    iconCls:'iconfont icon-guanbi3',
                                    handler: function(e){
                                        $(e.data.target).textbox('clear');
                                    }
                                }]"
                               prompt="请选择..."
                               id="factoryCode" name="factoryCode" type="text">

url返回json：

[
    {
        "id": "8D916FBDFD1E0192E053AC1001020192",
        "factoryId": "01",
        "factoryName": "测试1",
    },
    {
        "id": "C7398B4CD1200072E053AC1001020072",
        "factoryId": "02",
        "factoryName": "测试2",
        
    }]

常用取值方法：

options()：返回选择对象

getData():返回加载的数据

loadData(data):加载列表数据

reload(url):重新加载远程数据列表

setValues(values):设置combobox的值数组

setValue(value):设置combobox的值

clear():清空combobox的值

select(value):选中指定的值

unselect(value):取消指定的值

例：

//取ID
var factoryCode= $('#factoryCode').combobox('getValue');
//取显示的name
var factoryName= $('#factoryCode').combobox('getText');

事件：

onBeforeLoad(param): 操作之前将数据加载，返回false就取消这个荷载作用

onLoadSuccess():触发时，远程数据加载成功

onLoadError：触发时，远程数据加载错误

ONSELECT：触发，当用户选择一个列表项

onUnselect：触发，当用户取消选择一个列表

例：

$("#factoryCode").combobox({
            //用户选择后，触发onChange事件
            onChange: function (newValue, ordValue) {
                //取选中的名称
                let factoryName = $("#factoryCode").combobox("getText")
                //赋值给另外一个组件内
                $("#factoryName").textbox("setValue", factoryName )
            }
        });

EasyUI文档：Easyui Combobox 组合框_EasyUI 插件

本文从网上搜集资料后自行整理，用于记录。