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. hadoop-磁盘出现坏盘，如何能在线换盘

    涉及到磁盘存储路径的配置文件参数有: hdfs-site.xml <name>dfs.datanode.data.dir</name> yarn-site.xml <na ...

  2. Dubbo学习总结（2）——Dubbo架构详解

    一.前言 部门去年年中开始各种改造,第一步是模块服务化,这边初选dubbo试用在一些非重要模块上,慢慢引入到一些稍微重要的功能上,半年时间,学习过程及线上使用遇到的些问题在此总结下. 整理这篇文章差不 ...

  3. Anton and Permutation

    Anton and Permutation time limit per test 4 seconds memory limit per test 512 megabytes input standa ...

  4. Win8.1 Hyper-V 共享本机IP上网

    公司的Win8.1自带了Hyper v,可是死活连接不到网络. 原因是公司只给每人分配一个局域网IP,而默认情况下Hyper-V的虚拟机会动态分配了一个没有经过MIS人员许可的IP…… 百度了N久解决 ...

  5. SecureCRT的设置和美化

    一  . SecureCRT 7.1  的 安装     http://liufei888.blog.51cto.com/2625545/1306231 1.下载注册机SecureCRT.v.6.7. ...

  6. hdu_1018_Big Number_201308191556

    Big NumberTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  7. ELECTRON新增模块的方法

    因为electron和node.js用的V8版本不一致,所以直接使用npm安装的模块可能在electron中不可用,特别是使用c.c++开发的模块.官方的说明:https://github.com/e ...

  8. Android平台Airplay的实现方法

    Airplay属于局域网内异构设备之间分享多媒体数据的一种通信协议.Airplay设备有客户端和服务器之分,一般将小屏IOS设备实现为Airplay客户端,大屏幕设备实现为Airplay服务器.即iP ...

  9. UVa 642 - Word Amalgamation

    题目:给你一个单词列表.再给你一些新的单词.输出列表中又一次排列能得到此新单词的词. 分析:字符串.对每一个字符串的字母排序生成新的传f(str).总体排序,用二分来查找就可以. 说明:注意输出要满足 ...

  10. HDU 5387 Clock （MUT#8 模拟）

    [题目链接]:pid=5387">click here~~ [题目大意]给定一个时间点.求时针和分针夹角,时针和秒针夹角,分针和秒针夹角 模拟题,注意细节 代码: #include&l ...