easyui combobox的增加全选解决方案

　   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获取。

 

 

 

posted @ 2017-05-07 21:04  青天流云  阅读(9050)  评论(0)  编辑  收藏  举报