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. js事件委托或事件代理

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  2. hadoop在线退役datanode

    退役dn2echo "dn2" >>excludes echo "dn2" >>yarn-excludes sh refresh-nam ...

  3. 使用Eclipse 创建Spring Boot项目

    一.为什么要使用 Spring Boot ? Spring Boot解决的问题 (1) Spring Boot使编码变简单 (2) Spring Boot使配置变简单 (3) Spring Boot使 ...

  4. MAC OS下JDK版本切换指南

    刚上手的用MAC开发的小伙伴们会发现,MAC自带JDK版本为1.6,通常会安装在 /System/Library/Java/JavaVirtualMachines/1.6.0.jdk/目录下,但是更多 ...

  5. [cogs736][网络流24题#13]星际转移[网络流，网络判定]

    将一个空间站分为天数个点,每次枚举天数,每增加一天就把对应天数的边连上,用网络流判定可行性,即-判断最大流是否不小于k,注意编号不要错位.通过此题,可见一些网络流题目需要用到网络判定方法,但虽然答案具 ...

  6. U-Boot> help, 命令集

    U-Boot> help ?       - alias for 'help' base    - print or set address offset boot    - boot defa ...

  7. nyoj_676_小明的求助_201312042142-2

    小明的求助 时间限制:2000 ms  |           内存限制:65535 KB 难度:2   描述 小明对数学很有兴趣,今天老师出了道作业题,让他求整数N的后M位,他瞬间感觉老师在作弄他, ...

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

    用途 通过ssh通道,不同主机之间复制文件 用法 scp [options] [user@host:]file1 [user2@host2:]file2 常用参数 -1使用 ssh 1协议 -2使用s ...

  9. 学习KNN算法体会和总结

    k-d树(k-dimensional树的简称),是一种切割k维数据空间的数据结构.主要应用于多维空间重要数据的搜索(如:范围搜索和近期邻搜索). 索引结构中相似性查询有两种主要的方式:一种是范围查询( ...

  10. WEB安全：SQL注入

    SQL注入是站点和web应用程序中最常见的安全漏洞. 这样的恶意技术有非常多应用场景, 但(SQL注入)一般是指在数据输入的地方注入代码以利用数据库应用程序中的安全漏洞. SQL注入在接收用户输入的接 ...