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

 

easyui combobox的增加全选解决方案的更多相关文章

  1. Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群

    Redis总结(五)缓存雪崩和缓存穿透等问题   前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...

  2. C#总结（三）DataGridView增加全选列

    最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...

  3. DataGridView增加全选列

    最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...

  4. EasyUi datagrid列表增加复选框

    本文为博主原创,未经允许不得转载 1.增加复选框列 {     field: 'oid',     title: '<input type=\"checkbox\" name ...

  5. EasyUI combobox下拉多选框的实现

    combobox实现下拉列表多选, 效果如下

  6. EasyUI combobox动态增加选择项

    有需求需要动态的为combobox增加可选项,后来解决方案如下 html如下 <select id="workerList"></select> js 如下 ...

  7. EasyUI combobox 中文无法检索最终解决方案！

    写在前面: 因为之前一直用EasyUI的combobox控件,但是苦于在火狐浏览器下输入中文无法直接检索必须在输入完成后再敲击一下键盘才可以(按一下shift或空格),原因是中文输入法屏蔽了EasyU ...

  8. easyui combobox下拉列表的多选值

    html: <input id="cc" class="easyui-combobox" value="" data-options= ...

  9. easyui反选全选和全不选代码以及方法的使用

    首先要说明的是,onclick="javascript:这里能写方法的名字,也能写一段JS的代码,但是方法名字要带括号.",其次就是onclick=“这里写的方法名必须存在于本页面 ...

随机推荐

  1. python--(协程 和 I/O多路复用)

    python--(协程 和 I/O多路复用) 一.协程 1. >>>单线程下实现并发, 最大化线程的效率, 检测 IO 并自动切换,程序级别的任务切换, 之前多进程多线程都是系统级别 ...

  2. Django获取当前页面的URL——小记

    获取带参数URL:request.get_all_path() 获取不带参数URL:request.path 获取主机地址:request.get_host()

  3. vs2005添加include lib文件目录

    vs2005添加include lib文件目录 http://blog.sina.com.cn/s/blog_79489160010145wb.html 1. 添加编译所需要的 lib 文件 [解决方 ...

  4. mysql grant 用户权限总结

    https://blog.csdn.net/anzhen0429/article/details/78296814

  5. 固定一个div在浏览器底部

    转自原文 如何固定一个div在浏览器底部   方法1:使用CSS绝对定位 div{ position:absolute; bottom:0px; left:0px; } 方法2:使用CSS固定定位 d ...

  6. Android开发之WebView的开发使用（源码分享）

    假设我们想提供一个web应用程序(或仅仅是一个网页)作为client应用程序的一部分,我们能够使用WebView.WebView类是Android的视图类的扩展,它同意您显示web页面的一部分活动布局 ...

  7. luogu3469 [POI2008]BLO_Blockade

    题目大意 给一个无向连通图,求对于每一个点,去掉该点后图中连通结点有序对的减少量. 思路 当时想这道题时,我想到:枚举每一个点,在删去它后连通的几个部分中Dfs得到各个部分的点的个数从而得到解,但是我 ...

  8. luogu3390 矩阵快速幂

    矩阵A乘矩阵B是A的第i行向量乘以B的第j列向量的值放在结果矩阵的i行j列.因为矩阵乘法满足结合律,所以它可以与一般的快速幂算法同理使用.注意矩阵在乘的时候取模. #include <cstdi ...

  9. 修复nexus4由于使用完美刷机或者刷机精灵导致的底层文件受损

    前一段nexus4升级android 4.4.4的时候突然发现无法使用线刷刷入官方镜像了.当时就感觉很奇怪,但是不知道怎么搞得刷进去了,但是第一次开机的时候总是卡在联网之后的验证(我当时以为是网络不好 ...

  10. java的list类

    java的list类 目录: list中添加,获取,删除元素: list中是否包含某个元素: list中根据索引将元素数值改变(替换): list中查看(判断)元素的索引: 根据元素索引位置进行的判断 ...