关于easyui combobox下拉框实现多选框以及全选、全不选的实现

参考文章:http://blog.csdn.net/u012027337/article/details/53927376

实现效果如下图:

关于easyui combobox下拉框实现多选框以及全选、全不选的实现_第1张图片

当勾选全选的时候,可以选中下列所有的选项,当取消勾选时可取消所有勾选。

废话不多说 贴代码吧:

前端代码:


//这里的id是上面的combobox的id,因为我要在点击一个按钮的之后再动态的加载出来,所以我把它单独的抽取出来了。如果需要一开始就加载数据加载方式为:
$(function(){
initCombobox(id);//id为你上面的控件id,例如我的控件id为fhry,那么我这里调用就是initCombobox(fhry);这个方法可以放在任何一个function中调用。
)
function initCombobox(id){
			var value="";
			$('#'+id).combobox({
				url: 'fhrygl/getFhyxm.action',//你要加载数据的后台链接,我这里是以一个Map的形式返回。
				method:'post',
				panelHeight:200,
				valueField:'text',
				textField:'text',
				multiple:true, 
				queryParams : {
						xlname:$('#xltree').tree('getSelected').text,
						 whqd:selectgd
				}//参数,可根据自己的需要来修改或者不要
				formatter:function(row){
					var opts=$(this).combobox('options');
					return '' + row[opts.textField]  
				},
				onLoadSuccess:function(){
					 var opts = $(this).combobox('options');  
	                    var target = this;  
	                    var values = $(target).combobox('getValues');//获取选中的值的values  
	                    $.map(values, function (value) {  
	                        var el = opts.finder.getEl(target, value);  
	                        el.find('input.combobox-checkbox')._propAttr('checked', true);   
	                    })  
				},
				onSelect: function (row) { //选中一个选项时调用  
                    var opts = $(this).combobox('options');  
                    //获取选中的值的values  
                    var name=$("#"+id).val($(this).combobox('getValues'));
					  //当点击全选时,则勾中所有的选项					
                      if(name="全选"){
                    	var a= $("#"+id).combobox('getData');
                    	 for(var i=0;i




你可能感兴趣的:(关于easyui combobox下拉框实现多选框以及全选、全不选的实现)