easyui前端实现多选框_关于easyUI中combobox多选并附加checkbox的实现

在easyUI的基础组件中combobox只有带radiobutton的效果，而且只支持单选。

但是我们可以在此控件的基础上，对combobox进行重写，就能够实现checkbox多选效果。

大致需要重写以下几个方法：

format : function(row){

var opts = $(this).combobox("options");

return "" + 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;

}

}

重写以上方法后，就能够实现combobox的带checkbox的多选