easyui combobox 带 checkbox

最新推荐文章于 2020-11-30 15:46:30 发布

转载最新推荐文章于 2020-11-30 15:46:30 发布 · 122 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用 EasyUI 的 combobox 控件实现多选功能，并详细解释了配置项及其回调函数的作用，包括加载数据成功后的处理、选项选中及取消选中的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$('#cc').combobox({
url:'combobox_data1.json',
method:'get',
valueField:'id',
textField:'text',
panelHeight:'auto',
multiple:true,
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) {
//console.log(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);
}
});