文档章节

Ext ComboBox 实现下拉多选,全选,反选

javaART
 javaART
发布于 09/25 14:35
字数 473
阅读 54
收藏 0

Ext ComboBox下拉选中-全选反选逻辑处理


Ext ComboBox 实现下拉多选,全选,反选

方法一:

  1. 代码
var me = this;
var isMultiSelect = true;//是否设置为下拉多选
me.selectValues = [];//保存被选中的数据
var factory_Store = Ext.create('Ext.data.Store', {
    data : [  
        {name: '昆明', code: 'KM'},  
        {name: '楚雄', code: 'CX'},  
        {name: '曲靖', code: 'QJ'},  
        {name: '玉溪', code: 'YX'} 
    ]  
});  
{
xtype : 'combobox',
store :factory_Store,
emptyText : '请选择',//下拉框初始显示字段
queryMode : 'local',
displayField : 'name',
valueField : 'code',
width : 370,
grow : true,
fieldLabel: '工厂',
value:factoryID,
name : 'factoryID',
multiSelect : isMultiSelect,//设置是否为下拉多选
listeners : {
	select: function(combo, record, eOpts ){
		if(isMultiSelect){
			combo.setValue(me.selectValues);
		}
	}
},
listConfig : isMultiSelect ? {
    itemTpl : Ext.create('Ext.XTemplate','<input type=checkbox>{[values.name]}'),
    onItemSelect : function(record) {
        var node = this.getNode(record);
        if (node) {
            Ext.fly(node).addCls(this.selectedItemCls);
            var checkboxs = node.getElementsByTagName("input");
            if (checkboxs != null)
                var checkbox = checkboxs[0];
            checkbox.checked = true;
        }
    },
    listeners : {
        itemclick : function(view, record, item, index, e, eOpts) {
        	var AllCheckBox = {//factory全选框的code和name要与数据源(store)中的一致
        			code:"",
        			name:"全部"
        	};
        	var nodes = this.getNodes(record.store.data.items);
        	var check_boxs = [];
        	var checkAll_box = null;
        	Ext.each(nodes, function(item) {
        		var check_box = item.getElementsByTagName("input");
        		check_boxs.push(check_box[0]);
        		if(item.innerText == AllCheckBox.name){
        			checkAll_box = check_box[0];
        		}
        	});
        	
            var isSelected = view.isSelected(item);
            var isClickAll = false;
            if(record.data.code == AllCheckBox.code){
            	isClickAll = true;
            }
            
            if(isClickAll && !isSelected){//点击全选框&&全选框没有选中
            	Ext.each(check_boxs, function(item) {
            		item.checked = true;
            	});
        		var newValues = [];
        		Ext.each(record.store.data.items, function(item) {
        			newValues.push(item.data.code);
    			});
            	me.selectValues = newValues;
            }else if(isClickAll){//点击全选框&&全选框没有选中
            	Ext.each(check_boxs, function(item) {
            		item.checked = false;
            	});
            	me.selectValues = [];
            }else {//点击其它选择框
            	var dex = me.selectValues.indexOf(AllCheckBox.code);
            	if(dex >= 0){//检查全选框是否被选中-是
            		var cancelChecks=[AllCheckBox.code,record.data.code];
            		Ext.each(cancelChecks, function(item) {
            			var cancel_dex = me.selectValues.indexOf(item);
                		if(cancel_dex >= 0){
                			me.selectValues.splice(cancel_dex,1);
                		}
                	});
            		checkAll_box.checked = false;
                }else{//否
                	if(!isSelected){
                		me.selectValues.push(record.data.code);
                	}else{
                		var cancel_dex = me.selectValues.indexOf(record.data.code);
                		if(cancel_dex >= 0){
                			me.selectValues.splice(cancel_dex,1);
                		}
                	}
                }
            	var checkboxs = item.getElementsByTagName("input");
        		if (checkboxs != null) {
                    var checkbox = checkboxs[0];
                    if (!isSelected) {
                        checkbox.checked = true;
                    } else {
                        checkbox.checked = false;
                    }
                }
            }
            
            if(me.selectValues.length + 1 == record.store.data.items.length){//检查是否是除全选框外的其它选择宽都被选中
            	me.selectValues.push(AllCheckBox.code);
            }
        }
    }
  }:{}
}
  1. 效果图

点击全选

点击非全选

© 著作权归作者所有

共有 人打赏支持
javaART
粉丝 1
博文 36
码字总数 12872
作品 0
昆明
后端工程师
私信 提问
easyui combobox下拉框实现多选框以及全选、全不选的实现

实现效果如下图: 当勾选全选的时候,可以选中下列所有的选项,当取消勾选时可取消所有勾选。 废话不多说 贴代码吧: 前端代码: //这里的id是上面的combobox的id,因为我要在点击一个按钮的之...

故久呵呵
07/12
0
0
jeecg3.5版本中comboBox标签的使用及完善

jeecg的官方文档是这样介绍comboBox标签的使用的: 属性名 类型 描述 是否必须 默认值 name string 控件名称 是 null url string 远程数据访问 是 null id string 唯一标识 是 null text st...

z_jordon
2015/04/17
0
0
easyui之datagrid(combobox类型的editor)

easyui的datagrid使用combobox作为editor,从combobox的下拉列表选值并提交url。 比较简单,之前由于对easyui不熟,也没查到合适的教程,走了不少弯路,现终于实现,整理一下。 <script type...

一剑倾城
2015/10/28
0
0
combobox多选下拉框,域里有值,而勾选框没有选上

combobox多选下拉框,域里有值,而勾选框没有选上

tym33
2015/03/16
893
2
jQuery EasyUI 1.5 发布

jQuery EasyUI 1.5 发布了,更新如下: 错误 combobox:加载包含选中项的数据时不触发“onSelect”事件,已修复。 datagrid:当字段设置空值有时“updateRow”方法不能正常工作,已修复。 改...

ejzhang
2016/08/16
9.3K
26

没有更多内容

加载失败,请刷新页面

加载更多

零距离接触阿里云时序时空数据库TSDB

概述 最近,Amazon新推出了完全托管的时间序列数据库Timestream,可见,各大厂商对未来时间序列数据库的重视与日俱增。 阿里云TSDB是阿里巴巴集团数据库事业部研发的一款高性能分布式时序时空...

阿里云云栖社区
12分钟前
0
0
OkHttpClient封装

import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.util.Map; import java.util.TreeMap; import java.util.Map.Entry; import o......

尘叙缘
14分钟前
1
0
零距离接触阿里云时序时空数据库TSDB

概述 最近,Amazon新推出了完全托管的时间序列数据库Timestream,可见,各大厂商对未来时间序列数据库的重视与日俱增。 阿里云TSDB是阿里巴巴集团数据库事业部研发的一款高性能分布式时序时空...

阿里云官方博客
14分钟前
0
0
centos 7 nginx_install.sh

#!/bin/bashset -eprintf "============开始安装nginx\n"printf "============输入nginx下载url,按Enter默认下载1.14.2版本\n"download_url='';while truedoread down...

偶遇一只小仙女
15分钟前
0
0
数据库高并发下乐观锁的原理

在高并发下,经常需要处理SELECT之后,在业务层处理逻辑,再执行UPDATE的情况。 若两个连接并发查询同一条数据,然后在执行一些逻辑判断或业务操作后,执行UPDATE,可能出现与预期不相符的结...

hansonwong
17分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部