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

参考文章:http://blog.youkuaiyun.com/u012027337/article/details/53927376

实现效果如下图：

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

废话不多说 贴代码吧：

前端代码:

//这里的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<String,String>的形式返回。
				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 '<input type="checkbox" class="combobox-checkbox">' + 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<a.length;i++){
                    		  var el = opts.finder.getEl(this, a[i].text);  
                             el.find('input.combobox-checkbox')._propAttr('checked', true); 
                    	} 
                     }
                   //设置选中值所对应的复选框为选中状态  
                    var el = opts.finder.getEl(this, row[opts.valueField]);  
                    el.find('input.combobox-checkbox')._propAttr('checked', true);  
                },  
                onUnselect: function (row) {//不选中一个选项时调用  
                    var opts = $(this).combobox('options');  
                    //获取选中的值的values  
                    $("#"+id).val($(this).combobox('getValues')); 
					//当取消全选勾中时，则取消所有的勾选					
                    if($(this).combobox('getValues')=="全选"){
                    	var a= $("#"+id).combobox('getData');
                    	for(var i=0;i<a.length;i++){
                  		  var el = opts.finder.getEl(this, a[i].text);  
                           el.find('input.combobox-checkbox')._propAttr('checked', false); 
                  		} 
                    }
                    var el = opts.finder.getEl(this, row[opts.valueField]);  
                    el.find('input.combobox-checkbox')._propAttr('checked', false);  
                }  
            });  
				
		}