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#学习笔记_08_面向对象

    08_面向对象 面向对象:一种看待问题解决问题的思维方式,着眼点在于找到一个能够帮助我们解决问题的实体,然后委托这个实体来帮我们解决问题:(在面向对象之前你要有一个女朋友,否则代码会经常出现bug) ...

  2. hdu 5170 精度控制

    众所周知,GTY是一位神犇,为了更好的虐场,他从来不写数学作业而是去屠题,他的数学老师非常不爽,但由于GTY每次考试都AK,她也不能说什么,有一天老师在黑板上写了四个数——a,b,c,da,b,c,d ...

  3. FOJ2250 不可能弹幕结界

    Problem 2250 不可能弹幕结界 Time Limit: 1000 mSec    Memory Limit : 65536 KB Problem Description 咲夜需要穿过一片弹幕 ...

  4. elasticsearch 数据导入(九)

    说明 maven依赖 官方客户端 https://www.elastic.co/guide/en/elasticsearch/client/java-rest/6.4/index.html <d ...

  5. 洛谷 P1843 奶牛晒衣服

    题目背景 熊大妈决定给每个牛宝宝都穿上可爱的婴儿装 . 于是 , 为牛宝宝洗晒衣服就成了很不爽的事情. 题目描述 熊大妈请你帮助完成这个重任 . 洗完衣服后 , 你就要弄干衣服 . 衣服在自然条件下用 ...

  6. 清北学堂模拟赛d5t6 cube

    题面有误!10,11,12操作类别为A,13,14,15类别为B,16,17,18类别为C. 分析:一道大暴力,每次记录一下走了多少步,上一步操作类别是啥就可以了.最后只需要写6种操作,每一次操作进行 ...

  7. dinic算法求最大流的学习

    http://trp.jlu.edu.cn/software/net/lssx/4/4.38.htm http://www.cnblogs.com/zen_chou/archive/0001/01/0 ...

  8. Clojure：通过cursive连接远程REPL服务器

    配置很简单,步骤如下:1.    选择Edit Configurations…2.    选择Clojure REPL -> Remote3.    输入远程服务器的ip和端口. 最后点运行就可 ...

  9. maven的启动类和MAVEN_OPTS参数

    maven的启动类和MAVEN_OPTS参数 在mvn.cmd的155行, set CLASSWORLDS_LAUNCHER=org.codehaus.plexus.classworlds.launc ...

  10. WEB开发面试题

    1.HTML的全称:   2.HTML的结构:   3.经常使用标签:                   4.CSS的全称: 5.CSS的作用:   6.CSS中创建Class的语法:        ...