`

关于向easyui插件combobox,添加下拉选项

阅读更多
    今天在开发过程中,遇到了一个如何关于向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:如果大家有其他什么好的方法,欢迎提供。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics