今天在开发过程中,遇到了一个如何关于向easyui插件combobox,添加下拉选项的问题。搞了很久,终于曲线找到了一条解决办法,把解决问题的过程记录如下,供有需要的人参考。
源代码如下,通过ajax调用,从服务端返回json字符串,并显示在客户端。
$('#test').combobox({
url:'地址',
valueField:'version',
textField:'name',
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0; // 同一转换成小写做比较,==0匹配首位,>=0匹配所有
}
});
现在需要对,返回的结果,增加一个值对选项。
最先想到的办法当然是通过操作combobox对象属性进行添加。但通过查看官方API,没有提供相应的方法。
好在有google和baidu,结果搜了一把,没有任何可用方案。网上有方案如下:
$('#test').append('<option value="">增加内容</option>');
证实这个方案起不到任何作用。
最后想用最直接的方法,后台在返回数据的时候,添加上我需要的键值对,这样前台显示的内容有了,但总感觉这个方法有点挫,还是不甘心就这么作罢了。
再次查看官方API,发现有个data属性,自动将data属性对应的json对象,解析为combobox下拉列表。突然想到,通过设置、修改data属性值来完成combobox下拉列表的添加。改造代码如下:
$.ajax({
url: '远程地址',
dataType: 'json',
success: function(jsonstr){
// 修改ajax返回的值
jsonstr.push({
'name':'新增值',
'version':'新增键'
});
$('#test').combobox({
data:jsonstr,
valueField:'version',
textField:'name',
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0; // 同一转换成小写做比较,==0匹配首位,>=0匹配所有
}
});
}
});
这样,就解决了通过服务端返回的数据,使用combobox,在前端进行动态添加修改键值对。绕了一圈,总算解决问题。
PS:如果大家有其他什么好的方法,欢迎提供。
分享到:
相关推荐
easyui中combobox后台交互实例
NULL 博文链接:https://wusuobuai.iteye.com/blog/1848724
这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。
easyui的datagrid中editor和combobox的级联,在datagrid中编辑项是下拉框的实现方式
easyui-combobox控件的后台数据递归生成json,前台绑定实例说明。 可直接拷贝到项目中,然后修改数据源即可使用。
本文实例为大家分享了EasyUI Combobox下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 性别: <input class="easyui-combobox" style="width: 100px;" type="text" id="gender" /> 2.显示 3.js...
主要为大家详细介绍了EasyUI学习之Combobox级联下拉列表的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ComboBox下拉框内字体加颜色 在COMBOBOX内重画得到的字体加颜色
主要介绍了EasyUI中combobox默认值注意事项,是个人在项目中遇到并解决的事宜,分享给大家,需要的朋友可以参考下
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
效果图: 图标 (function($){ //初始化清除按钮 function initClear(target){ var jq = $(target);... var opts = jq.data('combo').options;... var combo = jq.data('combo').combo;... var arrow = combo.find('...
easyui.js插件, <script type="text/javascript" src="/js/easyui.js"> <script type="text/javascript" src="/js/easyui-lang-zh_CN.js"></script>
支持下拉菜单 下拉树 模糊搜索,支持中间字段的匹配
jquery-easyui组件combobox模糊查询在IE中数据太多导致浏览器崩溃
修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...
我在做项目时,经常用到easyUI框架,今天总结一下easyUI中的combobox吧 创建easyui-combobox的方法,在easyUI的官网都有: 1、从带有预定义结构的 元素创建组合框(combobox) <select id=cc class=easyui-...
修改jquery easyui combobox模糊过滤 代码如下:filter:function(q,row){ var opts=$(this).combobox(“options”); //return row[opts.textField].indexOf(q)==0;// return row[opts.textField].indexOf(q)>-1;//将...