文档章节

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

javaART
 javaART
发布于 09/25 14:35
字数 473
阅读 4
收藏 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
粉丝 0
博文 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
自绘制HT For Web ComboBox下拉框组件

传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个组件看起...

xhload3d
2015/03/12
0
0
Jquery操作easy-ui表单

$("#id").combobox("select","value")//设置easy-ui下拉框的默认值是value $("#id").combobox("setValue","value")//为easy-ui下拉框的设置一个value值 $("#treecombobox").combobox("getVa......

CurtainRight
2015/11/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

线性一致性和 Raft

作者:沈泰宁 在讨论分布式系统时,共识算法(Consensus algorithm)和一致性(Consistency)通常是讨论热点,两者的联系很微妙,很容易搞混。一些常见的误解:使用了 Raft [0] 或者 paxos ...

TiDB
13分钟前
0
0
兄弟连区块链教程以太坊源码分析core-state-process源码分析

## StateTransition状态转换模型 /* The State Transitioning Model 状态转换模型 A state transition is a change made when a transaction is applied to the cu......

兄弟连区块链入门教程
14分钟前
0
0
linear-gradient渐变中的参数

在看张鑫旭的博客 遇到渐变数值后面带参数不太理解 @supports (-webkit-mask: none) or (mask: none) { .box { border: none; background: linear-gradient(to bottom, #34538...

红羊在厦门
16分钟前
0
0
Python yagmail模块自动发邮件

Python发邮件yagmail模块 import yagmail#连接服务器yag=yagmail.SMTP('xx@163.com','yy','smtp.163.com')#邮箱正文contents=["test","email send"]#发送邮件#yag.send('...

小白兔_球球
16分钟前
1
0
pada mysql

CREATE SCHEMA `exchange` DEFAULT CHARACTER SET utf8mb4 ;

qwfys
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部