EasyUI_Combobox输入文本匹配加载下拉框数据

本文介绍如何使用EasyUI的Combobox组件,通过输入文本实时匹配并从数据库加载下拉框数据。避免了使用onChange事件带来的问题,如触发Datagrid行单击事件和保存后不必要的操作。采用loader属性进行优化,实现更顺畅的用户体验。
摘要由CSDN通过智能技术生成

效果如图:


每次输入数据去匹配数据库数据,加载到下拉框中。


边输入边加载,通常我们想到的就是文本框的onChange事件,不过这里用onchange,可以实现,但bug就太多了。

每次点击文本框,就会触发datagrid的行单击事件,且每次输入保存后也会触发该事件,处理的东西很多。


改进,我用了loader属性。

 valueField: 'id',
 textField: 'text',
 url: "xx",
 mode: "remote", //定义文本改变时读取数据,remote为远程,用户输入的数据以参数名为q的数据请求到服务器,
 queryParams: {          
    // test: "123"<span style="font-family: Arial, Helvetica, sans-serif;">//附带查询参数(开启远程默认传递q,就是输入的内容)</span>
 },
 loader: ComboDataLoader, 
//过滤从远程服务器加载的数据

loader加载:

//Combobox过滤从远程服务器加载数据 param:传递的参数,
function ComboDataLoader(param, success, error) {
    //获取combobox输入的值
    var
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值