easyui combobox的增加全选解决方案
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的增加全选解决方案的更多相关文章
- Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- C#总结（三）DataGridView增加全选列
最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...
- DataGridView增加全选列
最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...
- EasyUi datagrid列表增加复选框
本文为博主原创,未经允许不得转载 1.增加复选框列 { field: 'oid', title: '<input type=\"checkbox\" name ...
- EasyUI combobox下拉多选框的实现
combobox实现下拉列表多选, 效果如下
- EasyUI combobox动态增加选择项
有需求需要动态的为combobox增加可选项,后来解决方案如下 html如下 <select id="workerList"></select> js 如下 ...
- EasyUI combobox 中文无法检索最终解决方案！
写在前面: 因为之前一直用EasyUI的combobox控件,但是苦于在火狐浏览器下输入中文无法直接检索必须在输入完成后再敲击一下键盘才可以(按一下shift或空格),原因是中文输入法屏蔽了EasyU ...
- easyui combobox下拉列表的多选值
html: <input id="cc" class="easyui-combobox" value="" data-options= ...
- easyui反选全选和全不选代码以及方法的使用
首先要说明的是,onclick="javascript:这里能写方法的名字,也能写一段JS的代码,但是方法名字要带括号.",其次就是onclick=“这里写的方法名必须存在于本页面 ...
随机推荐
- Ubuntu_linux系统与网络服务管理
1.远程telnet联机:telnetd: 2.远程加密ssh联机:openssh: 3.webmin远程联机:webmin: 3.VNC远程图像界面控制:vino: 4.NAT网关服务器:iptab ...
- zabbix 配置——bak
1.host 配置 create host Parameter Description Host name 主机名,只允许数字,空格,句号,下划线,非主流符号它不支持.zabbix客户端配置文件中的h ...
- Maven学习总结（2）——Maven项目构建过程练习
Maven学习总结(二)--Maven项目构建过程练习 上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自动化构建项目的过程 一.创建Maven项目 1.1.建 ...
- 清北学堂模拟赛d3t6 c
分析:比较神奇的一道题.要把树变成环肯定要先变成链,然后把链给拼接成环.接下来考虑一个脑洞大开的树形dp:设f[i][0]表示i不与父节点相连的链数,f[i][1]表示i与父节点相连的链数,先考虑怎么 ...
- Servlet中使用RequestDispatcher调派请求--forware
顺便演示了MVC的作法,以后hello.view可以移交到jsp中处理. 而MODEL和CONTROL,VIEW就实现了分享. HelloModel.java: package cc.openhome ...
- hibernate分表保存日志
@Service("accessLogService")@Transactionalpublic class LogMessageServiceImpl extends BaseD ...
- N天学习一个linux命令之rpm
用途 RPM是Redhat Package Manager三个单词首字母缩写,是类redhat linux系统的包管理器,用它可以安装包(二进制/源码),升级包,删除包,查询包信息等功能.RPM软件包 ...
- CF #329 D
D题,LCA是很明显的.要注意的是,因为是除法,所以最多可以除x>2的有64次,当大于64时可以直接返回0.而且注意到可能会有很多值为1的边,可以使用路径压缩,把边为1的边压缩掉,类似于并查集的 ...
- joinColumns和inverseJoinColumns的使用方法
近期在工作中使用springside.里面用到了hibernate的多对多 一開始我在配置department(部门表)和menu(栏目表)的时候.这样写的. Department实体类中的getMe ...
- 天了噜，我国4G用户超过2亿了！
近期,看到工信部一组统计数据,小编整个人都不好了,数据显示,2015年5月我国4G用户净增2281.6万,总数超过2亿户. 没错,卡是换成了4G卡,还是那句话,然并卵,用的还是3G手机.开的还是2G网 ...