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. c发邮件

    /* base64编码 */ static const char* base64_enc_map = \ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmno ...

  2. Codeforces Hello 2018 C - Party Lemonade

    传送门:http://codeforces.com/contest/913/problem/C 有n类物品,第i(i=0,1,2,...,n-1)类物品的价值为2i,花费为ci.任意选择物品,使得总价 ...

  3. GlobalSign 域名型 SSL 证书

      GlobalSign 域名型 SSL 证书,支持通配符型,只验证域名所有权,属于DV 域名验证级SSL证书,无须递交书面审查资料,网上申请便捷有效率.提供40位/56位/128位,最高256位自适 ...

  4. 【codeforces 767C】Garland

    [题目链接]:http://codeforces.com/contest/767/problem/C [题意] 一棵树; 树上的每个节点都有一个权值; 让你把一棵树切掉两条边; 然后把这棵树分成了3个 ...

  5. C结构体里的冒号

    unsigned m_ScrollType : 3;                             //uint型,占3bit;     unsigned m_ScrollDirection ...

  6. in与exists的区别

    转载自:http://blog.csdn.net/lick4050312/article/details/4476333 select * from Awhere id in(select id fr ...

  7. MySQL5.7出现无法启动服务等问题

    MySQL5.7版本后有点不同,就是没有DATA文件夹.总是莫名其妙出现一些错误.比如连不上数据库了,出现错误 can't connect mysql on localhost,键入 net star ...

  8. N天学习一个linux命令之ps

    ps命令 用途 显示系统进程信息 用法 ps [options] 常用选项 选项有三种风格,这里是指Unix风格 (Unix,BSD,GNU LONG OPTIONS) 简单刷选类 -A, -e 显示 ...

  9. monitor cursor

    客户提出了一个需求,他们改进了自己的程序,想证明程序现在open cursor变少了,也就是说程序运行过程中 open cursor的峰值变小了. 我写了一个脚本来进行这个监控. oracle[aaa ...

  10. MVC.Net: jqueryval错误

    当使用Mvc.net创建Create表单后,firebug Create页面会出现404 Not Found - http://192.168.3.95:7001/bundles/jqueryval& ...