1、解决方案背景:
项目中偶然需要用到easyui的combobox的组件,但是本组件自己没有包含全选的api事件。搜索了一些解决方案,但是不是很符合,后来发现是因为所使用的版本不一致所导致的。项目中使用的1.5的版本,而网上大部分的解决方案都是采用的自定义onSelect的方案,自己动手试过,确实不能,因为1.5版本的组件,在自定义onSelect的函数触发后,选择 了全部的值赋值给当前的组件,在赋值的同时,又会自动的触发onSelect的事件,会不断的陷入死循环中去。后来自己决定重新实现解决方案,重新定义onClick的事件,此事件是在1.5版本之后才有效使用的,下面介绍实现的具体方案。
2、实际解决方案:
自己封装AllCheckCombobox.js.源代码如下所示:
/**
*自己扩展easyui的 combobox,使其能够有全选和反选的功能。
**/
var AllCheckCombobox = (function (mod,selectId){
var select = $("#"+selectId);
/*
* combobox获取data的函数,可以替换成动态后台ajax获取,此处只是静态数据模拟。
*/
var getData = function (){
var data =[{"text":"长沙","value":"111"},{"text":"常德","value":"222"}];
data.unshift({"text":"全选/反选","value":""});
return data;
};
/*
* 扩展的核心函数之一,自己扩展combobox的onclick的函数,判断是否是全选/反选 选项,
* 若果是 则选中全部的选项,否则,清空全部的选项
*/
var onclick = function (record){
var valueField = select.combobox("options").valueField;
if(!record[valueField]){
var data = select.combobox("getData");
var values = select.combobox("getValues");
var selectVaues = [];
if((data.length - 1) != values.length){
data.reduce(function(prev, current, index, array){
selectVaues.push(current[valueField]);
},selectVaues);
}else{
selectVaues.push(record[valueField]);
}
select.combobox('setValues', selectVaues);
}
};
/*
* combobox的初始化函数,还可以自己设定一些其他的选项,可以参看easyui的官网。
*/
mod.initCombobox = function (){
$('#'+selectId).combobox({
valueField : 'value',
textField : 'text',
multiple : true,
editable : false,
panelHeight : 'auto',
panelMaxHeight : 300,
data : getData(),
onClick:onclick,
label : "城市 :",
labelPosition : "before",
labelAlign : 'right'
});
};
return mod;
})(window.AllCheckCombobox || {},'select');
具体的项目中的data 可以冲后台ajax获取,在动态获取到data数据后,自动的在最前面给增加一个"全选"的选项,扩展的onclick的事件,也是对当前的选择的值进行判断,得出的结果,来进行对当前的下拉框赋值操作。
3、测试代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>测试页面</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
<div id="panel" style="width:98%;padding:10px 10px;">
<input id="select" style="width:20%;" value=""/>
</div>
</body>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="AllCheckCombobox.js"></script>
<script type="text/javascript">
$(function(){
AllCheckCombobox.initCombobox();
});
</script>
</html>
4、测试效果:
选择全选的选项,就会自动的选择下面的所有的值,获取当前选中的值,可以使用easyui的combobox的getValues获取。