easyui 下拉多选框

1、将代码添加到common.js

//多选下拉框加上全选 只支持valueField = 'value', textField = 'label',
window.commboboxAddSelectedAllValue = function(_data){
	if(!_data || _data.toString().length < 1){
		return _data;
	}
	var o = [{'value' : '' , 'label' : '--全部--'}];
	return o.concat(_data);
}


//多选下拉框选择的数据样式
window.commboboxFornatter = function(_this, _row){
    var opts = $(_this).combobox('options');
    return '<input type="checkbox" class="combobox-checkbox" style="width:15px;">' + _row[opts.textField];
}


//获取下拉框中所有的值
window.getcomboboxValues = function(_this){
	var data = $(_this).combobox('getData');
	var datas = new Array(data.length);
	for(var a in data) {
	    datas[a] = data[a].value;
	}
	return datas;
}
//根据状态选中/取消选中来获取该调用什么方法
window.getCommboboxActionByStatus = function(_status){
	if(_status == true){
		return "select";
	}
	return "unselect";
}


//根据传入的值，控制下拉框的checkbox是否选中
window.setComboboxCheckedStatus = function(_this, _value, _status, _opts){
	var el = _opts.finder.getEl(_this, $.trim(_value));
	el.find('input.combobox-checkbox')._propAttr('checked', _status);
	try {// 如果combobox中没有值会报错
		$(_this).combobox(getCommboboxActionByStatus(_status),$.trim(_value));
	} catch (_error) {
		//alert("|"+_valueArr[i]+"|"+_error)
	}
}

//设置多选下拉框中数据是否选中的状态
window.setComboboxAllCheckboxStatus = function(_this, _status, _values){
	//获取下拉中的数据
	var children = $(_this).combobox("panel").children();
	$.each(children, function(index, obj){
		obj.firstChild.checked = _status;
	});
	$(_this).combobox('setValues',_values);
}



//多选下拉框选择数据事件
window.commboboxSelectEvent = function(_this, _row, _status, _values){
	
	var _opts = $(_this).combobox('options');
	if (_row[_opts.valueField] == "" || _row[_opts.valueField] == "--全部--") {
		if(!window.commboboxSelectedAllFlag){
			window.commboboxSelectedAllFlag = true;
			return;
		}
		setComboboxAllCheckboxStatus(_this, _status, _values);
	} else {
	    var el = _opts.finder.getEl(_this, _row[_opts.valueField]);
	    el.find('input.combobox-checkbox')._propAttr('checked', _status); 
	    
	    var _data = $(_this).combobox('getData');
	    var _selectedValues = $(_this).combobox('getValues');
	    if(_status && _selectedValues.length >= (_data.length-1)){
	    	setComboboxAllCheckboxStatus(_this, _status, _values);
	    } else {// 如果当前的操作有全选是选中的，就取消全选
	    	var _flag = false;
	    	for(var _val in _selectedValues){
	    		if(_selectedValues[_val] == ""){
	    			_flag = true;
	    			break;
	    		}
	    	}
	    	// _flag 判断当前全选按钮是否选中，如果选中就取消，否则就跳过
	    	if(!_flag){
	    		return;
	    	}
	    	window.commboboxSelectedAllFlag = false;
			setComboboxCheckedStatus(_this, "", false, _opts);
	    }

	}
}
//标识下拉框中全选是人工点击触发还是设置全选/取消全选时触发
window.commboboxSelectedAllFlag = true;

2、使用方式 引入common.js

<div>
	<label>路由代码</label>
	<input class="easyui-combobox textbox" id="queryRouteCode" name="queryRouteCode" > 	
</div>
<div style="display: none;">
	<input class="easyui-textbox" id="query_routeCode" name="routeCode" style="width: 130px" />			   
</div>
var routeCodeArr =  [{
		"value" : "t1",
		"label" : "T1"
	},{
		"value" : "t4",
		"label" : "T4"
	},{
		"value" : "t6",
		"label" : "T6"
	},{
		"value" : "t8",
		"label" : "T8"
	},{
		"value" : "sp4",
		"label" : "SP4"
	}];
	window.query_routecode = null;
	$("#queryRouteCode").combobox({
		data : routeCodeArr,
		valueField : 'value',
		textField : 'label',
		editable : false,
		multiple : true,
		loadFilter:function(data){
			return commboboxAddSelectedAllValue(data);
		},
		formatter: function (row) {
			return commboboxFornatter(this,row);
		},
		onLoadSuccess: function() {
			window.query_routecode =(getcomboboxValues(this)).join();
			$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));
		},
		onSelect: function (row) {
			commboboxSelectEvent(this,row,true,window.query_routecode.split(','));
			$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));
		},
		onUnselect: function (row) {
			commboboxSelectEvent(this,row,false,[]);
			$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));
		}
	});
注意：最后获取值时是获取id为query_routeCode 隐藏域的值


远程获取
window.query_routecode = null;
	$("#queryRouteCode").combobox({
		//data : routeCodeArr,
		url : contextPath + '/omcs/naga/siteTransportCapacityView/findAllRouteCode.pvt',
		mode : 'remote',
		rowsProperty : 'rows',
		valueField : 'value',
		textField : 'label',
		editable : false,
		multiple : true,
		loadFilter:function(data){
			return commboboxAddSelectedAllValue(data);
		},
		formatter: function (row) {
			return commboboxFornatter(this,row);
		},
		onLoadSuccess: function() {
			window.query_routecode =(getcomboboxValues(this)).join();
			$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));
		},
		onSelect: function (row) {
			commboboxSelectEvent(this,row,true,window.query_routecode.split(','));
			$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));
		},
		onUnselect: function (row) {
			commboboxSelectEvent(this,row,false,[]);
			$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));
		}
	});

3、加载时选中

onLoadSuccess: function() {
			window.query_routeCode=(getcomboboxValues(this)).join();
			// 默认设置选中所有
			setComboboxAllCheckboxStatus(this,true,window.query_routeCode.split(','));
			$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));
		},
onLoadSuccess : function() {
		window.query_routeCode= (getcomboboxValues(this)).join();
		var arr=window.query_routeCode.split(',');
		var temp=new Array();
		var children = $(this).combobox("panel").children();
		$.each(children, function(index, obj) {
			if (0 < index && index < 4) {
					obj.firstChild.checked = true;
					temp.push(arr[index]);
			}
		});
		//将需要选择的temp设置成当前复选框的值
		$(this).combobox('setValues',temp);
		
		$("#query_operType").textbox("setValue",$(this).combobox('getValues'));
	},

var announType =  [{
		"value" : "1",
		"label" : "升级维护通知"
	},{
		"value" : "2",
		"label" : "问题知会"
	},{
		"value" : "3",
		"label" : "特别事项提醒"
	},{
		"value" : "4",
		"label" : "其他"
	}];
	window.add_announType = null;
	$("#announType").combobox({
		data : announType,
		valueField : 'value',
		textField : 'label',
		editable : false,
		multiple : true,
		loadFilter:function(data){
			return commboboxAddSelectedAllValue(data);
		},
		formatter: function (row) {
			return commboboxFornatter(this,row);
		},
		onLoadSuccess: function() {
			//必须
			window.add_announType= (getcomboboxValues(this)).join();  
	        var arr=window.add_announType.split(',');  
	        var selectedRow = $('#mainGrid').datagrid('getChecked')[0];  
	        var needcheck=selectedRow.announType;//值为1234  
	        var children = $(this).combobox("panel").children();  
	        $.each(children, function(index, obj) {  
	            if (needcheck.indexOf(arr[index])>-1&&arr[index]!='') {  
                    obj.firstChild.checked = true;  
	            }  
	        });  
	        //将需要选择的temp设置成当前复选框的值  
	        $(this).combobox('setValues',needcheck.split(''));  
	          
	        $("#add_announType").textbox("setValue",$(this).combobox('getValues'));    
		},
		onSelect: function (row) {
			commboboxSelectEvent(this,row,true,window.add_announType.split(','));
			$("#add_announType").textbox("setValue",$(this).combobox('getValues'));
		},
		onUnselect: function (row) {
			commboboxSelectEvent(this,row,false,[]);
			$("#add_announType").textbox("setValue",$(this).combobox('getValues'));
		}
	});