在网上查找一番后,参考别人的代码,记录下来,方便以后查阅
引入的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);
}
});
}