easyui combobox 复选框多选

最新推荐文章于 2021-01-03 19:36:04 发布

原创最新推荐文章于 2021-01-03 19:36:04 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一个使用 jQuery 实现的 combobox 控件配置案例，该控件支持多选功能，并通过自定义 formatter 来实现复选框显示。文章详细展示了如何设置 combobox 的属性，包括 valueField、textField、editable 和 multiple 等。

$('#budgetIdstr').combobox({
valueField:'id',
textField:'orgName',
editable:false,
multiple:true,
separator:';',
// panelWidth:'auto',
formatter:function(row){
var opts;
if(row.selected==true){
opts = "<input style='width:15px;height:15px;vertical-align:middle;' type='checkbox' checked='checked' lass='combobox-checkbox' id='"+row.id+"' value='"+row.id+"'>"+row.orgName+"</input>";
}else{
opts = "<input style='width:15px;height:15px;vertical-align:middle;' type='checkbox' id='"+row.id+"' value='"+row.id+"'>"+row.orgName+"</input>";
}
return opts;
},
url:sname+'/BudgetinfoController/loadBudgetDetails',
loadFilter: function (rows) {
return rows;
},onSelect:function(rec) {
oCheckbox = document.getElementById(rec.id);
oCheckbox.checked=true;
},onUnselect:function(rec){
oCheckbox = document.getElementById(rec.id);
oCheckbox.checked=false;
},onShowPanel:function(){
$(this).combobox('panel').width("auto");
}

})