今天在开发过程中,遇到了一个如何关于向easyui插件combobox,添加下拉选项的问题。搞了很久,终于曲线找到了一条解决办法,把解决问题的过程记录如下,供有需要的人参考。
源代码如下,通过ajax调用,从服务端返回json字符串,并显示在客户端。
现在需要对,返回的结果,增加一个值对选项。
最先想到的办法当然是通过操作combobox对象属性进行添加。但通过查看官方API,没有提供相应的方法。
好在有google和baidu,结果搜了一把,没有任何可用方案。网上有方案如下:
证实这个方案起不到任何作用。
最后想用最直接的方法,后台在返回数据的时候,添加上我需要的键值对,这样前台显示的内容有了,但总感觉这个方法有点挫,还是不甘心就这么作罢了。
再次查看官方API,发现有个data属性,自动将data属性对应的json对象,解析为combobox下拉列表。突然想到,通过设置、修改data属性值来完成combobox下拉列表的添加。改造代码如下:
这样,就解决了通过服务端返回的数据,使用combobox,在前端进行动态添加修改键值对。绕了一圈,总算解决问题。
PS:如果大家有其他什么好的方法,欢迎提供。
源代码如下,通过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:如果大家有其他什么好的方法,欢迎提供。