easyui-combobox多选-样式改成checkbox

时间 2020-05-25 标签 easyui combobox 多选样式改成 checkbox

combobox自带属性支持多选.

$('# id').combobox({

//是否支持多选

multiple:true

})

combobox多选赋值

var idResult = new Array();

for(var i=0;i< idResult.length;i++){

//combobox赋值（赋的是 value ）

$('#id').combobox('select', idResult[i]);

}

combobox默认选中第一项

var data = $('#id').combobox('getData');
$("#id ").combobox('select',data[0].value);

重写combobox的样式

$('# id').combobox({

//是否支持多选

multiple:true,

//下面重写后，多选时增长checkbox效果

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');

$.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');

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');

var el = opts.finder.getEl(this, row[opts.valueField]);

el.find('input.combobox-checkbox')._propAttr('checked', false);

}

});