easyui combobox的增加全选解决方案
2024-09-22 13:44:50
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获取。
最新文章
- 【夯实PHP基础】PHP数组,字符串,对象等基础面面观
- iOS 杂笔-25(不要用copy修饰NSMutableString)
- maven+springmvc+spring+mybatis+velocity整合
- 获取DataGridView中的的选中行
- C#调用百度地图API经验分享(一)
- 【Django】如何按天 小时等查询统计?
- sharepoint 2010 基于AD的Form验证
- 839. Optimal Marks - SPOJ
- 导出项目为jar包
- 开放型Modbus/TCP 规范
- sql查询调优之where条件排序字段以及limit使用索引的奥秘
- 使用Visual Studio加断点调试Unity游戏的C#代码
- JsonArray转List,list转json字符串
- 【已解决】通过Package或者Package+Activity启动应用
- 日常开发工作常用linux命令
- 「TJOI2015」概率论 解题报告
- POJ 3281 Dining (拆点)【最大流】
- WHERE 子句操作符
- 没有公网的IP的用户有福了,即使您没有公网IP,我们要一样可以让您与ER对接,同时可远程访问
- 1043 Is It a Binary Search Tree (25 分)
热门文章
- 【Codeforces 474D】Flowers
- ActiveMQ学习总结(1)——ActiveMQ快速入门
- Grails里的集成测试代码试例
- git tag打标签常用命令
- HDU 1561&;HDU 3449 一类简单依赖背包问题
- ZOJ 3213
- [Cypress] Create True end-to-end Tests with Cypress (Smoke test)
- CreateDialog Win32 API调用的一个小问题
- Delphi 中控件路径加入不进去解决方法
- visual studio2013 C++查看对象布局