实现easyui中下拉复选功能 效果图属下

在网上查找一番后，参考别人的代码，记录下来，方便以后查阅

引入的js包

jquery.easyui.min.js

jquery.min.js

（一）body标签中添加input标签

<input class="easyui-combobox" id="instrumentDate" name="instrumentDate"  label="服务时间"  style="width:250px;height:30px;" >

（二）js代码

初始化下拉复选框

//下拉复选框
	function initCombobox(id){
		//加载下拉框复选框
		$('#'+id).combobox({
            valueField: 'value',
    		textField: 'label',
    		data: [{
    			label: '星期一上午',
    			value: '11'
    		},{
    			label: '星期一下午',
    			value: '12'
    		},{
    			label: '星期二上午',
    			value: '21'
    		},{
    			label: '星期二下午',
    			value: '22'
    		},{
    			label: '星期三上午',
    			value: '31'
    		},{
    			label: '星期三下午',
    			value: '32'
    		},{
    			label: '星期四上午',
    			value: '41'
    		},{
    			label: '星期四下午',
    			value: '42'
    		},{
    			label: '星期五上午',
    			value: '51'
    		},{
    			label: '星期五下午',
    			value: '52'
    		},{
    			label: '星期六上午',
    			value: '61'
    		},{
    			label: '星期六下午',
    			value: '62'
    		},{
    			label: '星期日上午',
    			value: '71'
    		},{
    			label: '星期日下午',
    			value: '72'
    		}],
            multiple:true,
            formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
                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
                $("#"+id).val($(this).combobox('getValues'));
			   //设置选中值所对应的复选框为选中状态
                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'));
              
                var el = opts.finder.getEl(this, row[opts.valueField]);
                el.find('input.combobox-checkbox')._propAttr('checked', false);
            }
        });
	}