easyui-combobox的简单使用

本文介绍了一种使用EasyUI Combobox实现下拉选择框的方法,通过前后端配合,简化了传统弹窗选择流程,提高了用户体验。

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

前台

<input class="easyui-combobox" id="ownerId" name="ownerId" data-options="width:150,url:'xxxxController.do?selectSysUser',
valueField:'id',textField:'realname',multiple:false" value="${projPage.ownerId}">	


后台



@RequestMapping(params = "selectSysUser")
@ResponseBody
public List<Map<String,Object>> selectSysUser() {
	String sql = "SELECT id,realname FROM t_s_base_user";
	List<Map<String,Object>> list = DbUtils.list(sql);
	return list;
}


效果就是和下拉框一样的,之前遇到这种都是弹窗加载后台数据然后勾选,点击选择按钮选择,太过麻烦。


PS:这编辑器用的我差点怀疑人生~~

### 如何使用 EasyUI Combobox 组件 #### 设置不可编辑的 Combobox 通过设置 `editable` 属性为 `false`,可以实现组合框无法手动输入的功能。可以通过 HTML 的属性定义或者 JavaScript 初始化来完成此操作。 HTML 定义方式如下所示: ```html <select class="easyui-combobox" data-options="width:400, editable:false"> <option>苹果</option> <option>葡萄</option> </select> ``` JavaScript 动态初始化方式如下所示: ```javascript $('.easyui-combobox').combobox({ editable: false }); ``` 以上两种方法都可以使组合框变为只读模式[^1]。 #### 获取 Combobox 值的方法 EasyUI 提供了多种获取 Combobox 中选定值的方式。主要分为两类:`getValue()` 和 `getText()` 方法。具体的选择取决于开发者在 `data-options` 中对组件的具体配置需求[^2]。 - 使用 `getValue()` 可以返回当前选中项对应的值字段。 - 使用 `getText()` 则会返回显示给用户的文本字段。 示例代码如下: ```javascript var selectedValue = $('#myComboBox').combobox('getValue'); // 返回值字段 var selectedText = $('#myComboBox').combobox('getText'); // 返回文本字段 ``` #### 加载 JSON 数据到 Combobox 为了动态加载远程数据源的内容至 Combobox,可以利用 URL 参数指定数据接口地址,并分别指明用于存储值和文本的字段名。 以下是官方文档推荐的一个实例: ```javascript $('#cc').combobox({ url: 'combobox_data.json', valueField: 'id', // 对应于 JSON 数据中的键名作为实际值 textField: 'text' // 显示给用户的文本部分对应的数据键名 }); ``` 该片段展示了如何从服务器端请求 JSON 格式的选项列表并绑定到控件上[^3]。 #### 实现全模糊查询功能 默认情况下,EasyUICombobox 支持的是右侧模糊匹配机制,即只有当用户输入字符串位于目标条目末端附近时才会被筛选出来;然而,在某些场景下可能需要更灵活的查找逻辑——比如允许任何位置上的子串匹配(即所谓的“全模糊”)。针对这一需求,网络上有两种主流解决方案可供参考[^4]: 一种思路是对原生过滤算法进行扩展定制化处理; 另一种则是借助第三方插件库增强原有特性集。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值