在easyUI的基礎組件中combobox只有帶radiobutton的效果,並且只支持單選。javascript
可是咱們能夠在此控件的基礎上,對combobox進行重寫,就可以實現checkbox多選效果。java
大體須要重寫如下幾個方法:web
format : function(row){ var opts = $(this).combobox("options"); return "<input type='checkbox' class='combobox-checkbox'>" + row[opts.textField]; }
onShowPanel : function(){
var opts = $(this).combobox("options"); target = this; var values = $(target).combobox("getValues"); $.map(values, function(value){ var children = $(target).combobox("panel").children(); $.each(children, function(index, obj){ if(value == obj.getAttribute("value") && obj.children && obj.children.length > 0){ obj.children[0].checked = true;
} }); }); }
onLoadSuccess : function(){ var opts = $(this).combobox("options"); var target = this; var values = $(target).combobox("getValues"); $.map(values, function(value){ var children = $(target).combobox("panel").children(); $.each(children, function(index, obj){ if(value == obj.getAttribute("value") && obj.children && obj.children.length > 0){ obj.children[0].checked = true;
} }); }); }
onSelect : function(row){ var opts = $(this).combobox("options"); var objCom = null; var children = $(this).combobox("panel").children(); $.each(children, function(index, obj){ if(row[opts.valueField] == obj.getAttribute("value")){ objCom = obj; } }); if(objCom != null && objCom.children && objCom.children.length > 0){ objCom.children[0].checked = true; } }
onUnselect : function(row){
var opts = $(this).combobox("options"); var objCom = null; var children = $(this).combobox("panel").children(); $.each(children, function(index, obj){ if(row[opts.valueField] == obj.getAttribute("value")){ objCom = obj; }
}); if(objCom != null && objCom.children && objCom.children.length > 0){ objCom.children[0].checked = false; } }